How to Make CSS Width to Fill Parent

How to make CSS width to fill parent?

EDIT:

Those three different elements all have different rendering rules.

So for:

table#bar you need to set the width to 100% otherwise it will be only be as wide as it determines it needs to be. However, if the table rows total width is greater than the width of bar it will expand to its needed width. IF i recall you can counteract this by setting display: block !important; though its been awhile since ive had to fix that. (im sure someone will correct me if im wrong).

textarea#bar i beleive is a block level element so it will follow the rules the same as the div. The only caveat here is that textarea take an attributes of cols and rows which are measured in character columns. If this is specified on the element it will override the width specified by the css.

input#bar is an inline element, so by default you cant assign it width. However the similar to textarea's cols attribute, it has a size attribute on the element that can determine width. That said, you can always specifiy a width by using display: block; in your css for it. Then it will follow the same rendering rules as the div.

td#foo will be rendered as a table-cell which has some craziness to it. Bottom line here is that for your purposes its going to act just like div#foo as far as restricting the width of its contents. The only issue here is going to be potential unwrappable text in the column somewhere which would make it ignore your width setting. Also all cells in the column are going to get the width of the widest cell.

---

Thats the default behavior of block level element - ie. if width is auto (the default) then it will be 100% of the inner width of the containing element. so in essence:

#foo {width: 800px;}
#bar {padding-left: 2px; padding-right: 2px; margin-left: 2px; margin-right: 2px;}

will give you exactly what you want.

CSS for fill parent width?

Have you tried: width: 100%; ?

Set the width of children to fill the parent

You can achieve this using flexbox properties.

Here is a demo:

.parent {

  display: flex;

  height: 120px;

  background: #000;

  padding: 10px;

  box-sizing: border-box;

}

.child {

  height: 100px;

  background: #ddd;

  flex: 1;

  margin: 0 10px;

}

<div class="parent">

  <div class="child"></div>

  <div class="child"></div>

  <div class="child"></div>

</div>

<div class="parent">

  <div class="child"></div>

  <div class="child"></div>

</div>

<div class="parent">

  <div class="child"></div>

</div>

Split divs by width to fill parent div

You're putting some extra " in there - after inline-block. Also take into account that line endings add an extra space, so your containers' total width would be 33% + 33% + 33% + 2 extra spaces.

You might want to try using display: flex;

<style>
.progressPercent {
    color: #000!important;
    background-color: green!important;
    border-radius: 0.5px;
    text-align: right;
    height:100%;
    font-weight: bolder;
}
</style>
<div style="display: flex;">
    <div class="progressPercent" style="flex-basis: calc( 100% / 3 );">33%</div>
    <div class="progressPercent" style="flex-basis: calc( 100% / 3 );">33%</div>
    <div class="progressPercent" style="flex-basis: calc( 100% / 3 );">33%</div>  
</div>

I'm using calc( 100% / 3 ) as it's more accurate than using 33% tree times, which is 1% short of 100%.

Make child divs expand to fill parent div's width

If you know there will always be three children, you can simply use:

.parent > .child {
    float: left;
    width: 33%;
}

.parent {
    overflow: auto; /*or whatever float wrapping technique you want to use*/
}

If you do not know how many children there are, you will need to use CSS tables, flexbox, or perhaps combine inline-blocks with text-align: justify.

Multiple divs with margin to fill parent width

Flexbox got you :) :

  Body {background:cyan;}

.parent {

  text-align:center;

  margin:0px;

  width:100%;

  padding:0px;

  background:blue;

  display: -webkit-box;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: justify;

  -webkit-justify-content: space-between;

  -ms-flex-pack: justify;

 }

    

.child{

  padding:15px 25px;

  background:#f00;

  list-style-type:none;

  width:inherit;

  margin:5px;

}

.child:nth-child(2n) {background:green;}

   <div class="parent">

<div class="child">sometext</div>

<div class="child">somemoretext</div>

<div class="child">sometext</div>

<div class="child">sometext</div>

</div>

<div class="parent">

<div class="child">somemoretext</div>

<div class="child">sometext</div>

</div>

<div class="parent">

<div class="child">somemoretext</div>

<div class="child">somemoretext</div>

<div class="child">sometext</div>

</div

>

Fill parent width equally

You can use display:table; and display:table-cell; if you add a wrapping div around your buttons :

FIDDLE

HTML :

<div class="button-container">
    <div>
        <button type="button" class="edit-quantity">...</button>
    </div>
    <div>
        <button type="button" class="edit-price">...</button>
    </div>
    <div>
        <button type="button" class="remove-item">...</button>
    </div>
    <div>
        <button type="button" class="remove-all">...</button>
    </div>
</div>

CSS :

.button-container {
    width:100%;
    height:100px;
    display:table;
}
.button-container >div {
    display:table-cell;
}
.button-container button {
    height:100%;
    width:100%;
}

---

Related Topics