468,257 Members | 1,415 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,257 developers. It's quick & easy.

Header, 3 column & footer layout problem - help!

I've been struggling to achieve the following layout for some time now
and I'm not getting anywhere. I've tried several approaches including
floats & absolute positioning and none seem to work, primarily due to
the footer not being aware of the columns due to me floating /
positioning them.

I have the following (very simple) markup:

<div id="head">...</div>
<div id="left">...</div>
<div id="center">...</div>
<div id="right">...</div>
<div id="footer">...</div>

The left and right columns are fixed width (px) and the center column
needs to take up whatever width is left over. All three columns need to
be the same height. The footer needs to run across the whole width of
the page underneath the 3 columns.

Can anyone suggest a layout stylesheet that will accomplish this as I'm
out of ideas :(

Many thanks

Nov 23 '05 #1
7 2386
Andrew wrote:
I've been struggling to achieve the following layout for some time now
and I'm not getting anywhere. I've tried several approaches including
floats & absolute positioning and none seem to work, primarily due to
the footer not being aware of the columns due to me floating /
positioning them.

I have the following (very simple) markup:

<div id="head">...</div>
<div id="left">...</div>
<div id="center">...</div>
<div id="right">...</div>
<div id="footer">...</div>

The left and right columns are fixed width (px) and the center column
needs to take up whatever width is left over. All three columns need to
be the same height. The footer needs to run across the whole width of
the page underneath the 3 columns.

Can anyone suggest a layout stylesheet that will accomplish this as I'm
out of ideas :(

Many thanks

I'm not very good at this, but no one else has answered, so I'll take a
stab. It does what you want, but might not flow the way you want. Its a
start, anyway.
http://www.reenie.org/test/test14.htm
<html>
<head>
<style>
#head{background-color:#EDE0ED;}
#left{width:200px; background-color:beige;float:left;}
#right{ background-color:yellow;}
#center{width:300px;background-color:#F2F1FE;float:left;}
#footer{background-color:#9FFBE1; clear:both;}
</style>
</head>
<body>
<div id="head">This is the head</div>
<div id="left">This is the left</div>
<div id="center">This is the center</div>
<div id="right">This is the right</div>
<div id="footer">This is the footer</div>
</body>
</html>
Nov 23 '05 #2
Els
Andrew wrote:
I've been struggling to achieve the following layout for some time now
and I'm not getting anywhere. I've tried several approaches including
floats & absolute positioning and none seem to work, primarily due to
the footer not being aware of the columns due to me floating /
positioning them.

I have the following (very simple) markup:

<div id="head">...</div>
<div id="left">...</div>
<div id="center">...</div>
<div id="right">...</div>
<div id="footer">...</div>

The left and right columns are fixed width (px) and the center column
needs to take up whatever width is left over. All three columns need to
be the same height. The footer needs to run across the whole width of
the page underneath the 3 columns.

Can anyone suggest a layout stylesheet that will accomplish this as I'm
out of ideas :(


http://www.pixy.cz/blogg/clanky/css-3col-layout/

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: The Communards - Don't leave me this way
Nov 23 '05 #3
meltedown wrote:
Andrew wrote:
I've been struggling to achieve the following layout for some time now
and I'm not getting anywhere. I've tried several approaches including
floats & absolute positioning and none seem to work, primarily due to
the footer not being aware of the columns due to me floating /
positioning them.

I have the following (very simple) markup:

<div id="head">...</div>
<div id="left">...</div>
<div id="center">...</div>
<div id="right">...</div>
<div id="footer">...</div>

The left and right columns are fixed width (px) and the center column
needs to take up whatever width is left over. All three columns need to
be the same height. The footer needs to run across the whole width of
the page underneath the 3 columns.

Can anyone suggest a layout stylesheet that will accomplish this as I'm
out of ideas :(

Many thanks

I'm not very good at this, but no one else has answered, so I'll take a
stab. It does what you want, but might not flow the way you want. Its a
start, anyway.
http://www.reenie.org/test/test14.htm


Never mind, I misunderstood. I thought he wanted to right column to take
up the leftover width.
Nov 23 '05 #4
In our last episode,
<11**********************@g47g2000cwa.googlegroups .com>,
the lovely and talented Andrew
broadcast on comp.infosystems.www.authoring.stylesheets:
I've been struggling to achieve the following layout for some time now
and I'm not getting anywhere. I've tried several approaches including
floats & absolute positioning and none seem to work, primarily due to
the footer not being aware of the columns due to me floating /
positioning them. I have the following (very simple) markup: <div id="head">...</div>
<div id="left">...</div>
<div id="center">...</div>
<div id="right">...</div>
<div id="footer">...</div> The left and right columns are fixed width (px) and the center column
needs to take up whatever width is left over. All three columns need to
be the same height. The footer needs to run across the whole width of
the page underneath the 3 columns. Can anyone suggest a layout stylesheet that will accomplish this as I'm
out of ideas :(


google for skidoo too or go directly to:

<http://webhost.bridgew.edu/etribou/layouts/skidoo_too/>
The header and the footer are no problem. The basic strategy
for the three columns is to make *huge* borders for the middle
column and put the right and left columns on them. A couple of
small css hacks are necessary to make it work in IE 5, and some
of the features in the sample page have to be done very
carefully because of IE 5 bugs in list elements, but otherwise
it is nearly foolproof and table layout free. If you are using
fixed-width side columns it will, of course, break when the
window is smaller than the sum of the side columns, but in
general it is without a doubt the best three-column solution I
have seen.

You can see examples of various adaptations by going to the
under-construction site in the sig.

--
Lars Eighner us****@larseighner.com http://www.larseighner.com/
War On Terrorism: Joe McCarthy Brigade
"The decadent left in its enclaves on the coasts is not dead -- and may well
mount a fifth column." Andrew Sullivan, _The New Republic_
Nov 23 '05 #5
Andrew wrote:
I've been struggling to achieve the following layout for some time now
and I'm not getting anywhere. I've tried several approaches including
floats & absolute positioning and none seem to work, primarily due to
the footer not being aware of the columns due to me floating /
positioning them.

I have the following (very simple) markup:

<div id="head">...</div>
<div id="left">...</div>
<div id="center">...</div>
<div id="right">...</div>
<div id="footer">...</div>

The left and right columns are fixed width (px) and the center column
needs to take up whatever width is left over. All three columns need to
be the same height. The footer needs to run across the whole width of
the page underneath the 3 columns.

Can anyone suggest a layout stylesheet that will accomplish this as I'm
out of ideas :(

Many thanks


Simply rearrange your HTML thusly:
<div id="head">...</div>
<div id="left">...</div>
<div id="right">...</div>
<div id="center">...</div>
<div id="footer">...</div>
What you will then do in your CSS is to specify:
#head { }
#left {float:left;}
#right {float:right;}
#center { }
#footer {clear:both;}
You will be floating "left" to the left, "right" to the right and
allowing "center" to flow between the two.

--
Gus
Nov 23 '05 #6
I should have added that any of the 3 columns could be longer than the
other and the footer will need to be pushed to the bottom of the
longest. Something that I don't think will work if any of the columns
are floated, but I could be wrong :)

Gus Richter wrote:
Andrew wrote:
I've been struggling to achieve the following layout for some time now
and I'm not getting anywhere. I've tried several approaches including
floats & absolute positioning and none seem to work, primarily due to
the footer not being aware of the columns due to me floating /
positioning them.

I have the following (very simple) markup:

<div id="head">...</div>
<div id="left">...</div>
<div id="center">...</div>
<div id="right">...</div>
<div id="footer">...</div>

The left and right columns are fixed width (px) and the center column
needs to take up whatever width is left over. All three columns need to
be the same height. The footer needs to run across the whole width of
the page underneath the 3 columns.

Can anyone suggest a layout stylesheet that will accomplish this as I'm
out of ideas :(

Many thanks


Simply rearrange your HTML thusly:
<div id="head">...</div>
<div id="left">...</div>
<div id="right">...</div>
<div id="center">...</div>
<div id="footer">...</div>
What you will then do in your CSS is to specify:
#head { }
#left {float:left;}
#right {float:right;}
#center { }
#footer {clear:both;}
You will be floating "left" to the left, "right" to the right and
allowing "center" to flow between the two.

--
Gus


Nov 23 '05 #7
Andrew wrote:
I should have added that any of the 3 columns could be longer than the
other and the footer will need to be pushed to the bottom of the
longest. Something that I don't think will work if any of the columns
are floated, but I could be wrong :)


The clear:both on "footer" takes care of that if either of the floats is
the longest. If the non-floated item is longest, the clear would not be
necessary, but wouldn't hurt either.

--
Gus
Nov 23 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

4 posts views Thread by Stian Lund | last post: by
9 posts views Thread by Xavier van Unen | last post: by
11 posts views Thread by Grischa Brockhaus | last post: by
2 posts views Thread by ~john | last post: by
reply views Thread by kermitthefrogpy | last post: by
reply views Thread by zattat | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.