SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    May 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Why float:left to make an element fill its container?

    I've been reading the Max Design tutorial on floats. My question is about inline lists for making navigation bars--specifically, step 11: "Float the UL." SitePoint frustratingly won't let me post links, but here's the code:

    Code:
    CSS CODE
    ul#navlist
    {
    padding: 0;
    margin: 0;
    list-style-type: none;
    float: left;
    width: 100%;
    color: #fff;
    background-color: #036;
    }
    
    ul#navlist li { display: inline; }
    
    ul#navlist li a
    {
    float: left;
    width: 5em;
    color: #fff;
    background-color: #036;
    padding: 0.2em 1em;
    text-decoration: none;
    border-right: 1px solid #fff;
    }
    
    ul#navlist li a:hover
    {
    background-color: #369;
    color: #fff;
    }
    
    HTML CODE
    <ul id="navlist">
    <li><a href="#">Item one</a></li>
    <li><a href="#">Item two</a></li>
    <li><a href="#">Item three</a></li>
    </ul>
    I've played around with it, and indeed, the UL won't fill the width of the screen unless I add "float:left." Why? There's nothing floating around the UL element, so it's not intuitive that I would need to add the float property.

    Can anybody help?

    Thanks!

  2. #2
    SitePoint Member
    Join Date
    May 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The specific code in question is this:

    ul#navlist
    {
    padding: 0;
    margin: 0;
    list-style-type: none;
    float: left;
    width: 100%;
    color: #fff;
    background-color: #036;
    }

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Float the <li>'s and add overflow:hidden; to the <ul>.

    The reason float was needed (or overflow:hidden is because it needed a way to clear and contain the elements inside of it. (I explained that poorly I think).
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •