Header, 3 column & footer layout problem - help!

**meltedown** · Nov 23 '05, 03:37 AM

Re: Header, 3 column & footer layout problem - help!

Andrew wrote:[color=blue]
> 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
>[/color]
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{backgroun d-color:#EDE0ED;}
#left{width:200 px; background-color:beige;flo at:left;}
#right{ background-color:yellow;}
#center{width:3 00px;background-color:#F2F1FE;f loat:left;}
#footer{backgro und-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">Thi s is the center</div>
<div id="right">Thi s is the right</div>
<div id="footer">Thi s is the footer</div>
</body>
</html>

**Els** · Nov 23 '05, 03:37 AM

Re: Header, 3 column & footer layout problem - help!

Andrew wrote:
[color=blue]
> 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 :([/color]

404 Not Found

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

**meltedown** · Nov 23 '05, 03:37 AM

Re: Header, 3 column & footer layout problem - help!

meltedown wrote:[color=blue]
> Andrew wrote:
>[color=green]
>> 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
>>[/color]
> 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[/color]

Never mind, I misunderstood. I thought he wanted to right column to take
up the leftover width.

**Lars Eighner** · Nov 23 '05, 03:37 AM

Re: Header, 3 column & footer layout problem - help!

In our last episode,
<1131831506.663 636.294870@g47g 2000cwa.googleg roups.com>,
the lovely and talented Andrew
broadcast on comp.infosystem s.www.authoring.stylesheets:
[color=blue]
> 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.[/color]
[color=blue]
> I have the following (very simple) markup:[/color]
[color=blue]
><div id="head">...</div>
><div id="left">...</div>
><div id="center">... </div>
><div id="right">... </div>
><div id="footer">... </div>[/color]
[color=blue]
> 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.[/color]
[color=blue]
> Can anyone suggest a layout stylesheet that will accomplish this as I'm
> out of ideas :([/color]

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 usenet@larseigh ner.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_

**Gus Richter** · Nov 23 '05, 03:37 AM

Re: Header, 3 column & footer layout problem - help!

Andrew wrote:[color=blue]
> 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
>[/color]

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

**Andrew** · Nov 23 '05, 03:37 AM

Re: Header, 3 column & footer layout problem - help!

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:[color=blue]
> Andrew wrote:[color=green]
> > 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
> >[/color]
>
> 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[/color]

**Gus Richter** · Nov 23 '05, 03:37 AM

Re: Header, 3 column & footer layout problem - help!

Andrew wrote:[color=blue]
> 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 :)[/color]

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

Header, 3 column & footer layout problem - help!

Header, 3 column & footer layout problem - help!

Comment

Comment

Comment

Comment

Comment

Comment

Comment