======== Executive Summary ========
On Win/IE, float:right seems to float against the viewport instead of the containing block when the viewport is smaller than the containing block. How do I stop it?
============================
I've been using CSS and HTML for awhile, and I feel pretty comfortable with it -- even doing some neat tricks like rollover depressions on my website (<!-- m --><a class="postlink" href="http://www.rougepages.com/">http://www.rougepages.com/</a><!-- m -->). However, ever since I moved away from tables toward pure div/css, I've had some serious headaches with the my layout.
Here's the thing: I want to essentially emulate the bahavior that was a piece of cake with tables. The page should layout like this (check rougepages.com to see):
A) The page is padded with a silver border.
B) The content is all within a white "container" box with a thin red border.
C) The container box consists of a header, a three-column body, and a footer.
D) The two side columns should be of fixed width, but the middle column should be liquid.
E) The rightmost column should have a red background, but the other two should have a white background.
Sounds like the classic (and repeatedly solved) three-column liquid layout, right? Unfortunately, there are a couple reasons that the solutions I've put together don't work, and I've tried two:
Solution #1: make the two sidebars float left and right, respectively. Give the middle column a solid red right-border that is the same width as the right column, so if the middle column is taller, the right column still has a red background. If the right column is taller, it reaches to the bottom anyway.
Problems with #1:
a) Win/IE6 makes the column float to the right of the *viewport* (i.e., not in the containing div). This causes problems when the window is resized to be too small, or when the page is viewed in 800x600 resolution. The right column doesn't stop (like it does in Firefox/Safari) - it just keeps on comin'. So HOW DO I GET IT TO BEHAVE? This also causes the center column's contents to jump down if the window gets too small.
b) The title image is relatively positioned to put it partially within the header. So far so good. Unfortunately, Win/IE expands the height of the header to fit the title image. Mac/IE is even worse - it leaves the header as the correct size, but pushes all of the content below the header down.
c) Minor gripe - since the side columns are floated, they have to come first in the markup instead of the (more important) center column. This is only a problem for accessibility reasons and since the right column has a counter that takes a bit longer to load.
Solution #2: Absolute positioning would seem to solve all of these problems, since it would (a) keep the right column within the container, (b) allow precise layout for the header and title image, and (c) allow me to put the main center content first in the markup. So I position the container absolutely, along with the header and both side columns.
Problems with #2:
a) If I position the main content absolutely, there's no "normal flow" in the container, so the container ends up with a height of 0. I can't set its height explicitly, since all the content is determined dynamically. And if I try to set it relative to the viewport, it will usually end up too small for the contents!
b) If I let the main center column content stay in normal flow (not absolute positioning), and it is taller than the right column, all is peachy. But if the right column (or left, for that matter) is taller, it overflows the container and looks sloppy.
c) The footer is having strange problems. It seems to want to go to the bottom of the *viewport*, even though it is within an absolutely positioned container (in Safari at least). In Win/IE, it just doesn't stretch correctly. I have a feeling this is a pretty easy fix, though.
I'm reluctant to kludge it by putting lots of padding on the center column. Specifying a min-height is a bit better, but it's barely supported. There also seem to be some issues with Win/IE and the footer's position.
Does anyone have any more insight on this? I figure that the best ways to fix it would be:
1) Use the float solution, and figure out how to keep the right column within the container on Win/IE (HELP!!!).
2) Use absolute positioning, and figure out how to make an absolutely positioned container's height depend on its absolutely positioned contents. (This may be impossible).
Thank you for your time!
===============================
Think there's nothing going on in Baton Rouge?
Think Again.
<!-- m --><a class="postlink" href="http://www.rougepages.com/">http://www.rougepages.com/</a><!-- m -->
===============================Jeez. It looks so tempting to reply...
On Win/IE, float:right seems to float against the viewport instead of the containing block when the viewport is smaller than the containing block. How do I stop it?
============================
I've been using CSS and HTML for awhile, and I feel pretty comfortable with it -- even doing some neat tricks like rollover depressions on my website (<!-- m --><a class="postlink" href="http://www.rougepages.com/">http://www.rougepages.com/</a><!-- m -->). However, ever since I moved away from tables toward pure div/css, I've had some serious headaches with the my layout.
Here's the thing: I want to essentially emulate the bahavior that was a piece of cake with tables. The page should layout like this (check rougepages.com to see):
A) The page is padded with a silver border.
B) The content is all within a white "container" box with a thin red border.
C) The container box consists of a header, a three-column body, and a footer.
D) The two side columns should be of fixed width, but the middle column should be liquid.
E) The rightmost column should have a red background, but the other two should have a white background.
Sounds like the classic (and repeatedly solved) three-column liquid layout, right? Unfortunately, there are a couple reasons that the solutions I've put together don't work, and I've tried two:
Solution #1: make the two sidebars float left and right, respectively. Give the middle column a solid red right-border that is the same width as the right column, so if the middle column is taller, the right column still has a red background. If the right column is taller, it reaches to the bottom anyway.
Problems with #1:
a) Win/IE6 makes the column float to the right of the *viewport* (i.e., not in the containing div). This causes problems when the window is resized to be too small, or when the page is viewed in 800x600 resolution. The right column doesn't stop (like it does in Firefox/Safari) - it just keeps on comin'. So HOW DO I GET IT TO BEHAVE? This also causes the center column's contents to jump down if the window gets too small.
b) The title image is relatively positioned to put it partially within the header. So far so good. Unfortunately, Win/IE expands the height of the header to fit the title image. Mac/IE is even worse - it leaves the header as the correct size, but pushes all of the content below the header down.
c) Minor gripe - since the side columns are floated, they have to come first in the markup instead of the (more important) center column. This is only a problem for accessibility reasons and since the right column has a counter that takes a bit longer to load.
Solution #2: Absolute positioning would seem to solve all of these problems, since it would (a) keep the right column within the container, (b) allow precise layout for the header and title image, and (c) allow me to put the main center content first in the markup. So I position the container absolutely, along with the header and both side columns.
Problems with #2:
a) If I position the main content absolutely, there's no "normal flow" in the container, so the container ends up with a height of 0. I can't set its height explicitly, since all the content is determined dynamically. And if I try to set it relative to the viewport, it will usually end up too small for the contents!
b) If I let the main center column content stay in normal flow (not absolute positioning), and it is taller than the right column, all is peachy. But if the right column (or left, for that matter) is taller, it overflows the container and looks sloppy.
c) The footer is having strange problems. It seems to want to go to the bottom of the *viewport*, even though it is within an absolutely positioned container (in Safari at least). In Win/IE, it just doesn't stretch correctly. I have a feeling this is a pretty easy fix, though.
I'm reluctant to kludge it by putting lots of padding on the center column. Specifying a min-height is a bit better, but it's barely supported. There also seem to be some issues with Win/IE and the footer's position.
Does anyone have any more insight on this? I figure that the best ways to fix it would be:
1) Use the float solution, and figure out how to keep the right column within the container on Win/IE (HELP!!!).
2) Use absolute positioning, and figure out how to make an absolutely positioned container's height depend on its absolutely positioned contents. (This may be impossible).
Thank you for your time!
===============================
Think there's nothing going on in Baton Rouge?
Think Again.
<!-- m --><a class="postlink" href="http://www.rougepages.com/">http://www.rougepages.com/</a><!-- m -->
===============================Jeez. It looks so tempting to reply...