Auto Wrapping a <div> with a Dynamic Width

Question

Trying to create a box that contains sentences (with spaces) and can have a maximum width of 300px. When the text is too long, it will autowrap without a scroll bar.

EDIT:

Actually, I should have mentioned that I will need to float the box left. I'm putting it in a widget like so:

<div>
    <div>left control</div>
    <div>text</div>
    <div>right control</div>
</div>

It works, except when I try to place a background like so:

.rounded-reason {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    background-color:#ffffff;
    padding:10px;
    border: 2px solid red;
    margin-top:7px;
    margin-bottom:20px;
}

The background is too small. It works if I don't float the 'left control' and 'right control', but I want these to appear at the top of the box, not at the bottom.

Answer 1

It should do that.

<div style="width: 300px;">
<p>
Quisque faucibus commodo diam, ut vehicula risus ultrices at? Curabitur tempus eros in velit malesuada sodales? Maecenas auctor nisl quis libero lobortis eget varius eros porta. Nunc mauris lacus, pretium eget viverra semper, rutrum et turpis! Integer viverra sem at odio faucibus at gravida neque consequat. Aenean viverra tellus id felis dapibus bibendum. Integer eget mattis nisl. Nunc nec turpis nec lacus varius sagittis non et sapien! Vestibulum porta ultricies rutrum. Vivamus lorem elit, luctus ac viverra a, porta et nibh. Praesent quam neque, scelerisque non pretium at, suscipit ac quam. Mauris varius ipsum sit amet massa tempus facilisis interdum eros rhoncus. In ac enim et ipsum convallis lacinia.
</p>

</div>

The CSS height property should be auto by default. So, if you don't explicitly define the height, it will grow in height to fill its contents (provided the contents do not have position: absolute or float, which will change this behaviour somewhat).

Update

Sounds like you might be experiencing auto collapsing parent with floated children.

You can fix that like so... each one has their own pros and cons.

• Add overflow: hidden to the parent. This will however chop off all overflow.
• Add <span style="clear: both;"></span> or similar beneath the floats. This adds an extra unsemantic element.
• Float the parent. This is not compatible with all layouts
• Use JavaScript or :after CSS pseudo selector to add the clearing element (not supported without JavaScript, and not supported by IE 6/7 respectively)