Question

I want to have the same result as this : http://jsfiddle.net/mageek/faDkw/

HTML:

<div id="foo" >Hello</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
World!

CSS:

#foo
{
    background-color:red;
    height:400px;
    float:left;
}

But without all the <br />, because the height could change.

How can I do that?

Answer 1

You may just use display: inline-block (MDN docu), which unlike float: left does not put the div outside of the page flow.

HTML

<div id="foo" >Hello</div>
<br />
World!

CSS

#foo
{
    background-color:red;
    height:400px;
    display: inline-block;
}

Example fiddle.