SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2008
    Location
    Hot Springs, Montana
    Posts
    195
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    containing box question

    On this example site of mine, why would the ".container" div not contain the "#maincontent" and "#footer" divs? The .container div has a red dotted border. Also, if it's better I post the code, tell me and I will. Thanks again for any help.
    http://comprehensiveforestry.com/exa...ackground.html

  2. #2
    SitePoint Guru
    Join Date
    Jan 2007
    Posts
    967
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Floating the element makes it invisible to the parent object. Something needs to clear at the bottom without floating to extend the parent object to the bottom.

    On another note: The simpler your code is, the easier it will be to update, edit, and troubleshoot. Try to lose some of your classes. ie: use (#masthead h1{) instead of applying a special class where its kind of redundant. You don't need to apply the same class to all the list items. Just use an id on the <ul> so it would be referenced: #thelist li

  3. #3
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    add overflow:auto or hidden to the .container selector to clear the floats.

  4. #4
    SitePoint Zealot
    Join Date
    Jan 2008
    Location
    Hot Springs, Montana
    Posts
    195
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Eruna, thanks for the explanation and tips on the code. I'll definitely clean things up. What element would you have used to clear the lower floats?

    And, BPartch, thanks for the solution. It did the trick. Time to reread on floats and overflow. (Again.)

    I appreciate all this help. rbfree

  5. #5
    SitePoint Guru
    Join Date
    Jan 2007
    Posts
    967
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I probably would have cleared the footer.

  6. #6
    SitePoint Zealot
    Join Date
    Jan 2008
    Location
    Hot Springs, Montana
    Posts
    195
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Eruna, why do you prefer that approach? (Please humor me. I'm trying to put it all together in my meager mind.) Also, how would you have done it? Place an invisible <hr> element in the footer? Whatever your approach, would you give me a short explanation of why you would do it that way? Again, I'm just putting all this together. I really appreciate the contribution.

  7. #7
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  8. #8
    SitePoint Zealot
    Join Date
    Jan 2008
    Location
    Hot Springs, Montana
    Posts
    195
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all above. My brain started working again. I cleared it with a simple empty div styled with position: relative and clear: both.

    Which is the more appropriate solution: the overflow: auto property in the .container rule or the styled empty div? Or, does it matter a bit? EDIT: OK, I'm reading (and believing) that the w3c prefers the cleared element. Thanks for the link cooper.semantics.

    EDIT: Both the overflow: auto and .clearfix solutions are css solutions. Between these two solutions, which is best... or, which has the least potential for hidden problems?

  9. #9
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would say 'clearfix'. It is less problematic

  10. #10
    SitePoint Zealot
    Join Date
    Jan 2008
    Location
    Hot Springs, Montana
    Posts
    195
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, that's what I used.

  11. #11
    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)
    Sorry to chime in but I really think this post is worht mentioning-surprised noone mentioned it (took me forever to find it ). I almost gave up hope on google.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  12. #12
    SitePoint Zealot
    Join Date
    Jan 2008
    Location
    Hot Springs, Montana
    Posts
    195
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I read the post and copied it. It's another optimization problem.

    I suspect most of my prospective clients will have newer browsers, however....


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
  •