473,418 Members | 2,118 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,418 software developers and data experts.

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 2604
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: will | last post by:
Dear All, can anyone help here? I need to use XML/XSLT to print out some documents which must all have the same letterhead and footer section on all pages. The section in between is dynamic XML,...
4
by: Stian Lund | last post by:
Hi, I'm trying to create a 2 column layout with a footer on the bottom, where the (fixed-width) sidebar follows the content in the code, while showing on the left hand side of the content. The...
16
by: Dan V. | last post by:
How do you do a css 2 column layout with header and footer, with the 2nd column auto-stretching so entire page looks good for 800 x 600 resolution as min. and 1024 x 768 resolution as a max? ...
9
by: Xavier van Unen | last post by:
Hi guys and gals, I'm working on a 2 column CSS layout (for an ordering system) in which it isn't a priori known which of the two columns will be the longest, that depends on the (script...
0
by: Matthias | last post by:
Hi all, I have a problem with XSL FO. I wrote a handbook for my application in XML and formats it with xsl:fo (FOP) for PDF output. The handbook has some chapters. I have to write the actual...
11
by: Grischa Brockhaus | last post by:
Hi, I'm trying to produce a div layout containing a header on the top with fixed height, a footer on the bottom using fixed height and a content layer using what's left of the browsers window. ...
2
by: ~john | last post by:
I'm trying to get my header to have 2 images, one for the top left and one for the top right. Here's a link to my page... http://levelwave.com/dev/div/index.html and will eventually be...
2
by: darkzone | last post by:
Looked almost ok in my editor but not so good in fire fox. I was going for a layout that was elastic some what. A header with one image repeating 100%, an there image slightly to the left also in...
3
by: Noorain | last post by:
I designed a site. i want to header,footer,left & right column fixed but body information only scrolling. this site screen to be 800/600 px. i designed this way but when i used position fixed all...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...
0
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.