By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,974 Members | 1,834 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,974 IT Pros & Developers. It's quick & easy.

Header, 3 column & footer layout problem - help!

P: n/a
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
Share this Question
Share on Google+
7 Replies


P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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.