Layout problem

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Ted Hopp - 28 Jun 2007 18:57 GMT

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 |

+--------+----------------------+-----------+

+--------+----------------------+-----------+

| 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
ted@zigzagworld.com

Reply to this Message

Gus Richter - 28 Jun 2007 22:23 GMT

> +-------------------------------------------+
> | header |
[quoted text clipped - 13 lines]
> 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 |
+-------------------------------------------+

Signature

Gus

Reply to this Message

Ben C - 28 Jun 2007 22:47 GMT

> 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
[quoted text clipped - 26 lines]
> aligning a div at the bottom of its parent, but I can't seem to figure out a
> combined solution. Help please!

Below is a suggestion. If #left and r#ight need solid background colours
all the way down between #header and #footer, you can use a trick with
background images consisting of a narrow stripe and background-repeat
(which will also require putting the whole lot in a another containing
div).

One wrinkle with this is that if #right is the tallest of the three (or
within #bottomRight's height of the tallest) then #bottomRight will
obscure the bottom of #right's content.

This could be fixed by putting a dummy div at the bottom of #right of
the correct height, but you can only do that if you know the height of
#bottomRight to start with and I'm assuming it's "fluid".

This does also require that you set the height of #footer explicitly.

The idea here is that we're positioning #bottomRight relative to
#footer, not to the right column. #footer is the best reference point
since, because it is clear:both and follows #centre in the normal flow,
it is guaranteed to sit exactly underneath the tallest of the three
columns.

Perhaps this will give you some ideas anyway.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Test Page</title>
<style type="text/css">
#header { background-color: red; }
#left
{
float: left;
width: 250px;
background-color: blue;
color: white;
}
#right
{
float: right;
width: 250px;
background-color: blue;
color: white;
}
#footer
{
clear: both;
height: 3em;
background-color: pink;
position: relative;
}
#bottomRight
{
position: absolute;
bottom: 3em;
right: 0;
width: 250px;
background-color: palegreen;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="centre">
<div id="left">
left<br>
left<br>
left<br>
left<br>
left<br>
left
</div>
<div id="right">
right<br>
right<br>
right<br>
</div>
Centre's content goes here
</div>
<div id="footer">footer
<div id="bottomRight">
bottom<br>right
</div>
</div>
</body>
</html>

Reply to this Message

Ben C - 28 Jun 2007 22:54 GMT

[...]

><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
><html>
[quoted text clipped - 58 lines]
> </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.

Reply to this Message

dorayme - 29 Jun 2007 01:18 GMT

> > </div>
> > <div id="footer">footer
[quoted text clipped - 7 lines]
> 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"

Signature

dorayme

Reply to this Message

Ben C - 29 Jun 2007 08:05 GMT

>> > </div>
>> > <div id="footer">footer
[quoted text clipped - 10 lines]
> 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>

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / June 2007

Layout problem