html - How do I get a floating div to take up all available space -

html - How do I get a floating div to take up all available space -

i have next html:

<div class="section"> <p class="left">some text</p> <div class="right"> <p>item 1, item 2, item 3, item 4, item 5, item 6, item 7, item 8</p> </div> </div>

and css:

div.section { margin: 30px; background: blue; } div.section p.left { display: inline; margin-top: 4px; background: red; } div.right { float: right; word-wrap: break-word; background: green; }

you can play these in this fiddle. looks this:

i instead this, wrapping right-floated <div> width available without "left" <p>:

how can accomplish (and please don't tell me javascript, there should way css). wrapping want when specify width floating <div>, can't that, since width of left <p> varies.

update

allow me add together couple details. text generated dynamically, , width of parent <div> changes. there may 100 items, rather 8. splitting <p> not workable solution.

perhaps

<div class="section"> <p class="left">some text</p> <div class="right"> <p>item 1, item 2, item 3, item 4, item 5, item 6, item 7</p> <p>item 8</p> </div> </div>

seems work.

html css css-float