Floating left/right and height issues of course in IE

HTML & CSS
1

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

2

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

3

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.


#contentcontainer {
    width:1022px;
  [B]  background:#fff url(sidecolumn.gif) repeat-y 0 0;[/B]
    border-left: 1px solid black;
    border-right: 1px solid black;
[B]    overflow:hidden;/* clear floats */[/B]
}
#rightcolcontainer {
    width:770px;
[B]    /*margin-left:250px;*/
    /*vertical-align:top;*/
    /*float: inherit;*/[/B]
  [B]  float:right;[/B]
}

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.