#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    1
    Rep Power
    0

    DIV and List question (newbie)


    I'm building a test site to learn CSS. I can't figure out why my NAV list is not nested inside my HEADER. When I add padding to my list, the height of the header doesn't change. Also I can't vertically align my nav list in the header.
    (this is hard to explain, I can't post URLs because I'm a new user...)

    Here is the markup:

    <div class="header">
    <ul id="nav">
    <li><a href="#">work</a></li>
    <li><a href="#">about</a></li>
    <li><a href="#">contact</a></li>
    </ul>
    </div>
    <div id="main">
    <div class="leftCol"></div>
    <div class="rightCol"></div>
    </div>
    </div>

    -------------------------

    Here is some of the CSS:

    #nav {
    list-style: none;
    float: right;
    margin: 0 20px 0 0;
    }

    #nav li {
    float: left;
    margin: 10px;
    }

    #nav li a {
    color: #fff;
    text-decoration: none;
    }

    #nav li a:hover {
    color: #888;
    }

    -----------------------

    NOTE: As a new user I'm not allowed to post a URL. It would be MUCH more helpful if I could post a URL to my test site so that people could see all the code.

    Thanks

    Ak
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    32
    When you float an element, it essentially removes it from the boundaries of your containing element so your header won't 'stretch' to match the floated elements inside it unless you clear after the floated elements.

    Now I know I will probably get shot down in flames for this, but the simplest way to do this that I have been using for years is just to create a class
    Code:
    .clear { clear: both; }
    And then apply that either as a div on its own after the floated elements and before the close of the header, or add the class to the header itself.
    Code:
    <div class="header clear"><!-- Add here -->
    <ul id="nav">
    <li><a href="#">work</a></li>
    <li><a href="#">about</a></li>
    <li><a href="#">contact</a></li>
    </ul>
    </div>
    <div id="main">
    <div class="leftCol"></div>
    <div class="rightCol"></div>
    </div>
    <!-- OR add here -->
    <div class="clear"></div>
    </div>
    The more 'up to date' method is to use clearfix
    Code:
    .clearfix:after {
    	visibility: hidden;
    	display: block;
    	font-size: 0;
    	content: " ";
    	clear: both;
    	height: 0;
    	}
    * html .clearfix             { zoom: 1; } /* IE6 */
    *:first-child+html .clearfix { zoom: 1; } /* IE7 */
    And again, add this class to the parent element, in this case your header (as I did above)

IMN logo majestic logo threadwatch logo seochat tools logo