CSS 100% width in floated div

Question

<div style="float:left">

    <div class="designerWrapper">   
        <div class="pageBox">

            content

        </div>            
    </div>

</div>
<div style="float:left; margin-left:10px;">

    content 2

</div>
<div style="clear:both"></div>            
<br /><br />

How do I make the div that holds content 2 100% width? If I set it to 100% width it is too wide, at the moment it expands with it's contents length.

Do you want both floated divs to be next to each other or one behind the other ? — Shikiryu, Feb 01 '11 at 10:16
Could you make a [jsFiddle](http://jsfiddle.net) example of your problem? — thirtydot, Feb 01 '11 at 10:26

score 2 · Accepted Answer · answered Feb 01 '11 at 13:19

you sould use the table stuff

<div id="outer1">
<div id="outer2">
    <div id="left"></div>
    <div id="right"></div>
</div>
</div>

css:

#outer1 {display:table;width:600px;height:30px;}
#outer2 {display:table-row;width:600px;height:30px;}
#left {display:table-cell; width:15px;}
#right {display:table-cell; width:auto;}

important there is no floating! because the table display floats the cells automatically. i didnt test the code hope works.

score 0 · Answer 2 · answered Feb 01 '11 at 10:26

0

You can set min-width depend upon your requirement. later on it will expand with its content

<div style="float:left; margin-left:10px;min-width:110px;">

    content 2

</div>

answered Feb 01 '11 at 10:26

enthusiastic

732
2
9
18

CSS 100% width in floated div

2 Answers2

Linked