SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru tombempty's Avatar
    Join Date
    Oct 2001
    Location
    New York
    Posts
    688
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Floating left/right and height issues of course in IE...

    Ok, new issues with my site over at http://www.kardwelldev.com/wheelsofchance/newsite

    For some reason, the menu on the left hand side is not reaching the bottom of the page. I need this menu to reach the bottom of each page no matter what the content on the right.

    Also, in IE, the content on the right seems to start AFTER the menu or container on the left.

    Are these two related or does float not work in IE anymore?

    Thanks for any help or advice on this,

    Paul
    ********
    Regards,

    P

  2. #2
    SitePoint Guru tombempty's Avatar
    Join Date
    Oct 2001
    Location
    New York
    Posts
    688
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok forget the 2nd thing, I was restraining it with a width element that was causing it to break.

    but I still need help with that first one and the blasted menu that will not touch the bottom of the page.

    Thanks
    ********
    Regards,

    P

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Float both columns and then clear the floats for a more stable layout. You had a margin-left of 250px on the content to clear the sidebar but the sidebar was 251px anyway (250px + 1px border).

    However Ie6 would have the three pixel jog anyway so float both columns and avoid all the issues.

    You can't make your sidebar go all the way to the footer as CSS doesn;t work like that so remove all youe min-height:100% as they are no use here (see the faq on 100% height for the reasons why).

    The easiest way to solve the problem is to repeat a 251px x 10px image down the content container to create the illusion of the column (faux column).

    e.g.

    Code:
    #contentcontainer {
        width:1022px;
        background:#fff url(sidecolumn.gif) repeat-y 0 0;
        border-left: 1px solid black;
        border-right: 1px solid black;
        overflow:hidden;/* clear floats */
    }
    #rightcolcontainer {
        width:770px;
        /*margin-left:250px;*/
        /*vertical-align:top;*/
        /*float: inherit;*/
        float:right;
    }
    You should include the background colour of the sidebar and its right border in the image you make. There are ways of doing it without images but it means massaging the html and adding extra elements which should be avoided especially as the background image is such an easy solution.


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
  •