SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Oct 2004
    Location
    USA, Saratoga Springs, NY
    Posts
    296
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    clear:both; -- doesn't seem to be working?

    I only just recently realized that my clearing divider wasn't working as I had expected it to. I had set a height to the container specifically to make things easier to look at while I was working on the CSS of the inner containers, and once finished I removed the height...oops... It seems my container expands beyond where it should.

    I've stripped a majority of the text and images to leave a shell of my "divitis" (unfortunately, I couldn't figure out how to get around this design with less DIVs) with the problem area.

    Link:
    http://www.sspl.org/temp/issue/issue2.html

    Information:
    #content seems to obey the cleardiv DIV clearing, but neither #bar_primary or #bar_secondary (the left and right columns in the center area) do not. I'm not sure if #mainwrap, #contentwrap (inner of mainwrap), or what ever else may be causing the problem. I'm confounded!

    Any suggestions, pointers, or anything else is welcomed!
    I have tried placing clearing DIVs in other areas (after #contentwrap and #mainwrap) without success.


    P.S. - IE6 seems to follow the clear property, amazingly enough... Will need to see the problem in Firefox, Safari, or Opera (not sure about IE7 yet).
    They say, "Practice makes perfect," yet they also say, "Nobody's perfect". I don't get it.

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Don't add extra markup just to clear things. A good way is to give the thing that is containing the floats overflow:auto. That's all you need to clear the floated children... in decent browsers. For this to work in Internet Explorer, the container also must have layout, which can be triggered with any of these.

    As for your divitis problem, you can also help it by not using extra divs to make those grey bars (the ones with the info_strip class). Instead, just give the header and footer nice thick border-bottom and border-top, respectively.


    Also, you don't need a "footerwrap" or a "headerwrap" - why do you have those? In addition, you don't need a div to wrap around your list of links, you can style the UL just fine, pretty much just like a div really.

  3. #3
    SitePoint Addict
    Join Date
    Oct 2004
    Location
    USA, Saratoga Springs, NY
    Posts
    296
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow....well, thanks to your overflow:auto suggestion, I found that I had actually set the height property on those two columns causing the error... I feel like a huge ignoramous for (1)posting it here, (2)not noticing it, and (3)taking 30 minutes or so to try and go through things so I wouldn't have to ask for help and look stupid. Oh well.

    Wouldn't overflow:auto cause scrollbars though, or on an element that doesn't have a specific height given will it do as you say? ...or I can shutup and test it myself. SWEET. I never knew about that one. Thanks, Raffles.

    As far as the DIVs, the info_strip class sections are there specifically to hold information on a site-wide basis within the header. We occasionally have messages that we'd like delivered site-wide, and that section is there specifically for that purpose -- otherwise I definitely would have given the header and footer some borders instead.

    I've removed the headerwrap and will probably remove the footerwrap (edit: also removed the DIV around the links, no idea why I put that there, honestly, think I was typing too fast). They were both there originally to assist with centering cross-browser, yet allowing for a background to span the entire page. Since I've not yet finished the footer (wanted to get the content area finished) I won't remove it just yet, but hopefully I will.

    I will definitely try to go through all of my markup to be certain that I don't need it all once I've completed the CSS. I don't like the amount of junk I have in the file. I much prefer semantic, meaningful uses of markup, and this layout does not cater well to that philosophy...it pains me. Unfortunately, my CSS skill is not quite up to par with keeping true to that.

    Thanks for the look through, and sorry for the mess.
    They say, "Practice makes perfect," yet they also say, "Nobody's perfect". I don't get it.

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using overflow:auto or overflow:hidden to make an element contain its floated descendants can result in troublesome side effects sometimes. The PIE/Aslett approach, while requiring more code, is more robust.

    http://www.csscreator.com/attributes/containedfloat.php
    http://www.positioniseverything.net/easyclearing.html
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


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
  •