SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    815
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    problem with floats collapsing containing element...

    WHY oh WHY do floats collapse containing elements? doesn't make sense...

    I have problem here:
    http://mayacove.com/dev/css/floats2.html

    why are <li>'s (gray bg, rounded corners) taller than their containing <ul>'s?????? this is so frustrating.... so the margins for the <ul>'s are not working...
    I know I could give the <ul>'s a height, but this is not good practice, right? (esp for responsive design, which is what this pg will be eventually....)
    (also: <li>'s have to be float:left; and display:block; I know this method works for IE7 and I can't test on IE so I can't run experiments just for IE...)

    also have "collapse" prob with <nav>: if I remove red border from <nav> then the margin I set for it disappears completely:
    http://mayacove.com/dev/css/floats2.html

    would appreciate suggestions... thank you...

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    By default, floated elements hang out of a container (it would be a massive pain if they didn't.) There are various easy ways to make the container wrap around the floated content, and the easiest way here is this:

    Code:
    ul {overflow: hidden;}

  3. #3
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    815
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    oh my gosh -- awesome!!!! :-)

    thank you Ralph!!


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
  •