SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    Buongiorno from 8 degrees C clear & sunny wetherby UK :-)

    On this page http://tutorial.davidclick.com/2menu.html & illustrated here http://i216.photobucket.com/albums/c...ps2fac7531.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
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  2. #2
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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/c...ps2522faef.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
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  3. #3
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,263
    Mentioned
    115 Post(s)
    Tagged
    1 Thread(s)
    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">&nbsp;</span>). There are other, non-elemental ways to clear the float, but I have problems with those - this is simplest.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Zygoma,

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

    Code:
    #header
    {
    border-color:yellow;
    border-width:5px;
    border-style:solid; 
    overflow:hidden;    /* 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)...)

    Code:
    #header ul
    {
    outline:1px solid magenta;
    width:100%;
    float:left;
    overflow:hidden;
    }
    {overflow:hidden} will "contain" floated objects.

    Remember the example from a recent thread about containers.

    --hope this helps.

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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. #6
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As always I am v gratefull for all input, your continued patience and thought out answers are such an asset to me :-)
    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,
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •