Why not overflow: text content automatically required?

Question

In the following HTML snippet, how can I make the last paragraph under 2 lists, and not on the right?

<div> <ul style="float: left;"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> <ul style="float: left;"> <li>item 4</li> <li>item 5</li> <li>item 6</li> </ul> </div> <div> <p> <!-- why the heck isn't this under the uls?! --> A final paragraph of text </p> </div> 

This HTML is also available here: http://jsfiddle.net/8f2cE/

In addition, I would appreciate any explanation of why this behavior occurs at all. IMO this is inconsistent because 2 div are the default root level display: block; without any floating attributes, why shouldn't they flow as “normal” from top to bottom of the page?

Answer 1

When you float an element, it is removed from the normal stream (see the first paragraph https://developer.mozilla.org/en-US/docs/Web/CSS/float ) and therefore will float to the left (or right) of any content (your <div> and <p> ), as well as its default container will not stretch over its floating content. (in other words, only display: block; does not contain floats).

To create an element with its floats, you can put an element with clear after your floats (as other answers show here, ignoring the name of the question ...), or you can use overflow: auto; for the containing element, which is one of the properties that will trigger the formatting block :,

(text below from MDN )

Block formatting contexts are important for positioning (see float) and clearing (see clearing) of floats. The rules for placing and cleaning floats apply only to things inside the same context formatting block. Floats do not affect the arrangement of things in other block formatting contexts, and clear clears only gaps into the same block formatting context.

Answer 2

Just add <div style="clear:both"></div> after the first div . When you add style float: left; , uls lose their original position.

 <div> <ul style="float: left;"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> <ul style="float: left;"> <li>item 4</li> <li>item 5</li> <li>item 6</li> </ul> </div> <div style="clear:both"></div> <div> <p> <!-- why the heck isn't this under the uls?! --> A final paragraph of text </p> </div> 

Answer 3

Since you give float:left in ul, the parent div loses its height.

Record:

 div{overflow:hidden;} 

This will give the height of the div.

DEMO is here.

OR

Clear floats:

 <div> <ul style="float: left;"> ....... </ul> <div class="clr"></div> </div> 

CSS

 .clr{clear:both;} 

DEMO is here.

Answer 4

You should use clearer with float divs:

 <div style="clear:both;"></div> 

like this:

 <div> <ul style="float: left;"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> <ul style="float: left;"> <li>item 4</li> <li>item 5</li> <li>item 6</li> </ul> </div> <div style="clear:both;"></div> <div> <p> <!-- why the heck isn't this under the uls?! --> A final paragraph of text </p> </div> 

Answer 5

You can add an additional div , as indicated in other answers, or add overflow:auto; width:10% overflow:auto; width:10% to the very first div

 <div style="overflow: auto;width:100%"> <ul style="float: left;"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> <ul style="float: left;"> <li>item 4</li> <li>item 5</li> <li>item 6</li> </ul> </div> <div> <p> <!-- why the heck isn't this under the uls?! --> A final paragraph of text </p> </div> 

Source: http://www.quirksmode.org/css/clearing.html