SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    List not nested in DIV. Why? (newbie)

    Hi, I'm creating a test site to learn CSS:

    http://www.smudgestudio.ca/test/

    I can't figure out why my NAV list on the right is not nested inside the black HEADER. I know I could declare a height on the HEADER so that the NAV appears to be inside the header, but I shouldn't have to do that. Must be something wrong with my CSS. Any suggestions?

    Thanks!

    Ak

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,197
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Hi akirk. Welcome to the forums.

    This is a common issue. The reason is that parent elements don't wrap around floated elements by default. (The floats hang out of the parent unless you force the parent to contain or wrap around them.)

    You can easily fix this by adding this to your CSS:

    Code:
    .header {
      overflow: hidden;
    }
    Here is a longer explanation: http://pageaffairs.com/notebook/containing-floats

  3. #3
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Thanks Ralph.M!

    That was extremely helpful. I think I'm going to like it here.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,197
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by akirk View Post
    I think I'm going to like it here.
    It's a great forum, indeed. I'm pretty sure I've learned more here than from all books, sites and courses put together.


Tags for this Thread

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
  •