Layout problem

[Ted Hopp]

This one's a wrinkle on the usual 3-column layout problem. I need to have
fixed-width left and right side rails and a fluid center area, with a header
and a footer that go across all three. As usual, any one of the three
content areas may be the tallest. The wrinkle is that I need the right side
rail to contain a div (as wide as the right rail) that is aligned to the
*bottom* of the content area (just above the footer), even when the distance
from the header to the footer is controlled by the left or center columns.
Right now, the layout is done using a table, which works okay, except the
bottom part of the right rail can be much higher than is needed for its
content (which isn't ideal).

Here's an ASCII-art version of what I need:

+-------------------------------------------+
| header |
+--------+----------------------+-----------+
| left | center | right |
| | | |
| | | |
| | | |
| | +-----------+
| | | bottom |
| | | right |
+--------+----------------------+-----------+
| footer |
+-------------------------------------------+
I've read of many CSS solutions to the 3-column problem, and several ways of
aligning a div at the bottom of its parent, but I can't seem to figure out a
combined solution. Help please!

Ted Hopp
te*@zigzagworld.com

[Gus Richter]

Ted Hopp wrote:

>
+-------------------------------------------+
| header |
+--------+----------------------+-----------+
| left | center | right |
| | | |
| | | |
| | | |
| | +-----------+
| | | bottom |
| | | right |
+--------+----------------------+-----------+
| footer |
+-------------------------------------------+
I've read of many CSS solutions to the 3-column problem, and several ways of
aligning a div at the bottom of its parent, but I can't seem to figure out a
combined solution. Help please!

Make a single right div "wrapper" and place right and bottom right into
the wrapper div like so:

+-------------------------------------------+
| header |
+--------+----------------------+-----------+
| left | center | wrapper |
| | |+---------+|
| | || right ||
| | |+---------+|
| | |+ bottom ||
| | || right ||
| | |+---------+|
+--------+----------------------+-----------+
| footer |
+-------------------------------------------+

--
Gus

[dorayme]

In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:

</div>
<div id="footer">footer
<div id="bottomRight">
bottom<br>right
</div>
</div>
</body>
</html>

I should add: you can give #centre also margin-left: 250px and
margin-right: 250px so its contents don't wrap underneath the floats.

I think not quite... by doing this you also bring in the side
panels.

Perhaps bring down <div id="centre"to just before where you
have "Centre's content goes here"

--
dorayme

[Ben C]

On 2007-06-29, dorayme <do************@optusnet.com.auwrote:

In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:

</div>
<div id="footer">footer
<div id="bottomRight">
bottom<br>right
</div>
</div>
</body>
</html>

I should add: you can give #centre also margin-left: 250px and
margin-right: 250px so its contents don't wrap underneath the floats.

I think not quite... by doing this you also bring in the side
panels.

Yes of course you are right: the side panels are inside centre.

Perhaps bring down <div id="centre"to just before where you
have "Centre's content goes here"

Exactly, like this:

<div id="left">
...
</div>
<div id="left">
...
</div>
<div id="centre">
....
</div>