Quick brown fox clears floats in a clunky way :-(

HTML & CSS
1

Buongiorno from 8 degrees C clear & sunny wetherby UK :slight_smile:

On this page http://tutorial.davidclick.com/2menu.html & illustrated here http://i216.photobucket.com/albums/cc53/zymurgy_bucket/column-clear_zps2fac7531.jpg i found the three columns pushing up into the floated li items in the top of the page. I used a div with a clear both declaration which did the trick but what if i didnt want to sandwich a div in between the header and the columns, could i have used another method?

grazie tanto,
David

2

Please ignore the above post this is my question:

Why does the the unordered list on this page http://tutorial.davidclick.com/2menu.html & illustrated here http://i216.photobucket.com/albums/cc53/zymurgy_bucket/outside-header_zps2522faef.jpg sit outside the yellow header container when in the doc flow the UL is inside the #header yellow bordered container.

Thanks in advance,
David

3

Because the list is floated inside the div, which takes it out of the document flow. To get it back in, you need to add a clear element after it (something as simple as <span style=“clear:left”> </span>). There are other, non-elemental ways to clear the float, but I have problems with those - this is simplest.

4

Zygoma,

One common method of clearing floats is to apply {overflow:hidden} to the parent container.


#header
{
border-color:yellow;
border-width:5px;
border-style:solid; 
[color=blue]overflow:hidden;[/color]    /* add me */
}

You have lots of things floating in your example, but nothing cleared. WHY?

As Dave said, floating things takes them out of the document flow.

When you float something, assume that you also need to “contain” or “clear” that float in some way.

{overflow:hidden} assigned to the parent container is such a way. But what is the “parent container”?

Well, in your example it could be the <ul> itself (which would be more appropriate than applying it to #header).

(Without adding {overflow:hidden} to #header (as mentioned above)…)


#header ul
{
outline:1px solid magenta;
[color=red][s]width:100%;[/s][/color]
[color=red][s]float:left;[/s][/color]
[color=blue]overflow:hidden;[/color]
}

{overflow:hidden} will “contain” floated objects.

Remember the example from a recent thread about containers.

–hope this helps.

5

I had to add a couple of notes.

  1. floats are a misnomer. They DONT float UP, a floated element must come FIRST in the markup. But your UL comes after your H1, so its essentially dropping out of the collapsed #header element (ronpat has already explaind the collapse ). For fun, switch the position of the H1 and the UL and not the change in behavior.

  2. By default, floats shrinkwrap, but you can set explicit width. Floating something and giving it width:100% will cause the element to automatically drop. In other words the total width of the floated elements cannon exceed 100%.

  3. Floated elements clear floated children. You must have noted this because it is likely you floated the UL to CLEAR the floated LIs ( BTW, you could have also cleared LIs by giving the UL overflow:hidden, or even display:inline-block; or display-table; etc. But each method has its own strength and drawback. In essence tho, you were close. What you wanted could have done was to ALSO FLOAT #header and give it width:100%. Of course that opens the can of worms of the box-model: since 100% + 5px left border+5px right border is > 100%. but there are lot’s of clever solutions as well it really just depends on the SPECIFIC situation.

Still, as ronpat said, the most general solution is overflow:hidden;

6

As always I am v gratefull for all input, your continued patience and thought out answers are such an asset to me :slight_smile:
I feel I’m 80% there with the positioning clearing floats rules. I’ll pour over these posts & after a stong coffe and chocolate cake my grey matter may finally absorb the clearing floats rules.

Its now fixed: http://tutorial.davidclick.com/2menu.html

Grazie tanto,