Patrik Patrik - 27 days ago 6
HTML Question

Two divs side by side, but first with width auto stetch , second depended on context

I need two divs side by side. But second (right) has width depended on context. And the first has to be stretched.

jsFiddle EXAMPLE

HTML :

<div class="div-table">
<div class="div-table-row">
<div class="div-table-col1">1st Column<br>1st Column</div>
<div class="div-table-col2">2nd Column</div>
</div>
</div>


CSS

.div-table {display:table; width: 100%;}
.div-table-row {display:table-row; background-color : lightgray;}
.div-table-col1 {display:table-cell; width: auto; padding: 5px; background-color : green;}
.div-table-col2 {display:table-cell; width: auto; padding: 5px; background-color : orange;}

Answer

Give col1 a width of 100% and col2 a width of 0%

.div-table      {display:table; width: 100%;}
.div-table-row  {display:table-row;  background-color : lightgray;}
.div-table-col1 {display:table-cell; width: 100%; padding: 5px; background-color : green;}
.div-table-col2 {display:table-cell; width: 0%; padding: 5px; background-color : orange;}
<div class="div-table">
    <div class="div-table-row">
        <div class="div-table-col1">1st Column<br>1st Column</div>
        <div class="div-table-col2">2nd Column</div>
    </div>
</div>

Comments