SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Why is the right column not in line with others?

    Trying to do a 3 column float, the left and middle are behaving, but the left is out of line. I've tried fixing it but can't get it. They are inside a main div because the div will be further down the page after I get the float working.

    Code:
    http://tinyurl.com/y64edz (site)
    http://tinyurl.com/y5mrwy (css)

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Floats have to come first so the right column needs to go before the middle in the source.

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you that solved it!! Quick question, can you see why the footer isn't sticking to the bottom? I thought I had this problem before so I tried that fix, to no avail.

  4. #4
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For info on getting the footer to stick to the bottom: http://css-discuss.incutio.com/?page=FooterInfo

  5. #5
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, and if you cared about having them in flow order, since they are ALL the same width, you could just float them all left and let them stack - that way 'updated' wouldn't have to come before 'recent'...

  6. #6
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, got it at the bottom now. Also, thanks for the added info deathshadow I didn't realize you could do that.

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't test in IE6, but someone told me that the middle column is out of line and the footer isn't stuck to the bottom because the main container isn't 100% height. Can someone check this and possibly see where it is going wrong? Looks fine in IE7 and FF2

  8. #8
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For the columns, remove the width from the middle one and give the outer ones display: inline to counter IE's double margin bug.
    For the footer and the bottom, you need to move this down before the last closing </div> (there's one too many below it at the moment):

    Code:
    <div id="clearfooter"></div>
    <div id="footer"><h3>Content Copyright  2006 WordLocker.com</h3></div>
    Then you need to add this:

    Code:
    * html #container { height:100%; }
    which targets IE<=6 only and you should remove the min-height and height from #content (cos it's #container you're trying to make stretch to the bottom) and you don't really need the width on it either.


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
  •