CODEWITHSUNDEEP
htmlcss
Jesus is Lord
Jesus is Lord

Reputation: 15409

Float-ed outer div is not resizing to accommodate its children

Here is code, highly condensed:

<div style="float:left; border: 2px red solid; padding: 2px; margin: 2px;">
    <div style="width:50%; border: 2px green solid; padding: 2px;  margin: 2px;">
        <ul>
            <li>I_Would_Like_The_Outer_Div_To_Resize_To_Accomdate_This_Blob_Of_Text</li>
            <li>It's floated-ed because I'm using floating to implement a float layout.</li>
        </ul>
    </div>
</div>

And here is the output. I would like the outer div's width to expand so that the inner div contains the long blob of text. Here's the output:

enter image description here

EDIT:

Wow. I meant to say:

The outer div is float-ed because I'm using floating to implement a table-free COLUMN layout.

Upvotes: 0

Views: 257

Answers (2)

coryetzkorn
coryetzkorn

Reputation: 666

Try giving both DIVs width: auto and optionally set a min-width.

Upvotes: 0

anglimasS
anglimasS

Reputation: 1344

Just add word-wrap:break-word,

<div style="float:left; border: 2px red solid; padding: 2px; margin: 2px;">
    <div style="width:50%; border: 2px green solid; padding: 2px;  margin: 2px;word-wrap: break-word;">
        <ul>
            <li>I_Would_Like_The_Outer_Div_To_Resize_To_Accomdate_This_Blob_Of_Text</li>
            <li>It's floated-ed because I'm using floating to implement a float layout.</li>
        </ul>
    </div>

Upvotes: 1

Related Questions