Tuesday 15 June 2004

Negative Margins

I remember back in January when Dave Shea posted his Friday Challenge asking if it was possible to use floats to position a fixed-width sidebar on the right of a page, with a liquid content area, if the content comes before the sidebar in the markup.

Ryan Brill responded with his negative margin solution, at the time, I was having problems with Internet Explorer dropping the right column of this weblog when the view port is narrowed. After testing his solution, I applied it to this site and Internet Explorer seems to cope better than it did before.

Today, I notice that Ryan Brill's solution has made it to A List Apart in an article titled Creating Liquid Layouts with Negative Margins and also includes a solution for a three column layout. My next project (if I ever find the time) would be to convert my Windows Resources website from a tabular layout to a CSS based layout.

As you may have guessed, I am not a fan of absolute positioning and my previous efforts using floats have always resulted in Internet Explorer dropping the right sidebar when the view port was narrowed. I did have some success with Russ Weakley's Floatutorial but if I recall correctly, it involved placing the two sidebars before the main content and using CSS to place the sidebars in the right order but I didn't like that approach because if the stylesheet is switched off, I wanted the content to make sense.

I have taken a cursory look at Ryan Brill's three column solution in Internet Explorer and the third column finally disappears when the resolution is reduced to 480 x 320 which is acceptable to me. More importantly, the CSS Validates.