Advantages of "float:left;" without its disadvantages

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?

Why is `#foo` floated if you want to put content below it? – Jon Jul 07 '12 at 16:43 — Jon, Jul 07 '12 at 16:43
@Jon Not to specify a `width` – Mageek Jul 07 '12 at 16:44 — Mageek, Jul 07 '12 at 16:44

score 0 · Accepted Answer · answered Jul 07 '12 at 16:44

0

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.

answered Jul 07 '12 at 16:44

Sirko

65,767
19
135
167

Does `float:left;` have behaviours `display:inline-block;` doesn't have? – Mageek Jul 07 '12 at 16:45
@Mageek Yes. Given your example using float you might put several lines of text besides the `
` using float, whereas with `display: inline-block` you can just put a single line of text beside it with the next line starting below the box.
– Sirko Jul 07 '12 at 16:49
And in general? (Not specially in my example) – Mageek Jul 07 '12 at 16:50
Helpful link: http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements – lpd Jul 07 '12 at 16:52
The spec has the gory details, but I'll just say that the float model is a completely different realm from inline elements. – BoltClock Jul 07 '12 at 17:30
@Mageek Essentially you can achieve the same with both: [inline-block](http://jsfiddle.net/poikl/faDkw/6/) - [float](http://jsfiddle.net/poikl/faDkw/5/) – Christoph Jul 09 '12 at 07:29

Advantages of "float:left;" without its disadvantages

1 Answers1