SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict
    Join Date
    Sep 2001
    Posts
    320
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    clearing floats causes extra vertical space

    hey guys. i'm redesigning my site and this time i'm leaving the tables behind. this is my first major layout with css. here's what i got so far.

    http://craniumdesigns.com/NEW/cranium.html

    the css and the xhtml are all in one file so it's easy to troubleshoot. can you help me figure out why there is extra space after i put in the float clearing div? it's a lot more extreme in firefox.

    also, i am kinda confused when it comes to using ems or percentages for font sizing. right now i'm using pixels and i want to get away from it, so if someone could please point me to a good article on how to leave em behind that would be great. thanks!
    Steve Davis

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2006
    Posts
    493
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Replace clear:both; (clears floated menu on the right in FF) by clear:left;

  3. #3
    SitePoint Addict
    Join Date
    Sep 2001
    Posts
    320
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i'm talking about the extra space in the content box where i have the 2 <div class="clear_floats"></div>'s
    Steve Davis

  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's what Dan's post addresses - have you bothered to try it?

  5. #5
    SitePoint Addict
    Join Date
    Sep 2001
    Posts
    320
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah. i did that. it MOSTLY works, but the links under the first paragraph still bump right up against the bottom edge of their containing div. there should be a margin of 10 pixels.

    and could someone explain why this works and what the difference is from what i had?
    Steve Davis

  6. #6
    SitePoint Addict
    Join Date
    Sep 2001
    Posts
    320
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, so i made a class for clearing each side and did as necessary. i uploaded a new version. all i need to figure out now is how to get the "Read Article, Comments...." to be right aligned, not left. as u can see in my css code i tried using "text-align:right", but it didn't work.
    Steve Davis

  7. #7
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to float the whole <ul> right, and clear the containing element as well.
    Code:
    #home_new_article {padding: 10px; background-color:#262626; overflow:hidden;} 
    #home_new_article #article_links {display:inline;white-space:nowrap; float:right;}

  8. #8
    SitePoint Addict
    Join Date
    Sep 2001
    Posts
    320
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, that worked because we added overflow:hidden to the containing div. why?
    Steve Davis

  9. #9
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is one of the semantic methods of clearing floats. Here is more info posted by Paul O'B - partway down the page he discusses clearing.

  10. #10
    SitePoint Evangelist hexburner's Avatar
    Join Date
    Jan 2007
    Location
    Belgium
    Posts
    591
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can set a float clearing div's height to zero like this:

    Code CSS:
     div.clear {
        float: none;
        clear: both;
        font-size: 0px;
        line-height: 0px;
        height: 0px;
    }

    and use comment tags inside the clearing div:
    Code HTML4Strict:
    <div class="clear"><!-- --></div>
    FOR SALE: 1 set of morals, never used, will sell cheap


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
  •