CODEWITHSUNDEEP
css
Tom Gullen
Tom Gullen

Reputation: 61729

CSS 100% width in floated div

<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.

Upvotes: 1

Views: 1976

Answers (2)

Gergely Feh&#233;rv&#225;ri
Gergely Feh&#233;rv&#225;ri

Reputation: 7941

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.

Upvotes: 2

enthusiastic
enthusiastic

Reputation: 742

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>

Upvotes: 0

Related Questions