Reputation: 15409
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:
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
Reputation: 666
Try giving both DIVs width: auto
and optionally set a min-width
.
Upvotes: 0
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