5 replies [Last post]
glevine
Offline
Regular
Last seen: 16 years 19 weeks ago
Timezone: GMT-5
Joined: 2005-09-15
Posts: 12
Points: 0

I am trying to build a page with the following parts:

Header
Subheader
Left Column
Center Column
Right Column
Footer

It needs to look like this. I realize there are a few things that overlap which make this difficult (i.e., the search bar in the footer), but I have some ideas about how to deal with those when I get to them. What I am really struggling with now is trying to get a basic layout. Most of the 3-column layouts I've viewed have the main content in the center. And while I have spent a lot of time trying to customize those layouts to fit my needs, I have failed time and time again.

Just to give you an idea of my restrictions, the page size should be width: 800px (max/min), the header should be height: 92px, the subheader should be height: 28px; the left column should be width: 450px, the center column should be width: 213px, the right column should be width: 137px, and the footer should be height: 37px. The columns all need to stretch depending on content, but I know that I can simulate that using the Faux Column method.

What I need is some help structuring the page so that it starts at (0,Innocent -- not somewhere in the middle or off-center -- and the header is above the subheader, the subheader is above all 3 columns, and the footer is below all 3 columns. And of course I don't want to use absolute positioning if it all possible, although I realize that it may be a necessity, or easier, if I do. But if I do use absolute positioning, I need help positioning the footer so it is at the bottom of the page, flush below the longest content column.

Hopefully someone can be of some assistance and point me in the right direction. Thanks so much.

**Added after original post***
I wanted to add the I had some visions of using a 2-column layout for the content section and then splitting the right column into two columns using another 2-column layout or nested floats, but I thought that might get too confusing and might not be a good approach. So I decided to post this question to the forum in hopes that someone might have a good solution for me to try. Thanks again.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Re: 3-column layout to ditch tables

glevine wrote:

I wanted to add the I had some visions of using a 2-column layout for the content section and then splitting the right column into two columns using another 2-column layout or nested floats, but I thought that might get too confusing and might not be a good approach.

That's pretty much the approach as outlined in source ordered columns. You'd have a container for everything: position your header and subheader at the top for the full width, have a containing div for your content into which you'd do what you've described above, then finally have a div for your footer.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

glevine
Offline
Regular
Last seen: 16 years 19 weeks ago
Timezone: GMT-5
Joined: 2005-09-15
Posts: 12
Points: 0

3-column layout to ditch tables

Thanks for the reply. I finally found an example layout which was close to what I was looking for. There's just so much about css on the web these days that I had to go about 10 pages deep in my google search (usually I refine my search after about 3 pages). Basically I did end up following the approach that you agreed with and everything has worked out great so far. Now that the layout is done, I'm working strictly on the styles.

Red Matrix
Red Matrix's picture
Offline
Regular
RGV
Last seen: 12 years 39 weeks ago
RGV
Timezone: GMT-5
Joined: 2005-09-17
Posts: 24
Points: 0

3-column layout to ditch tables

Where did you find your example, please?

Dave

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

3-column layout to ditch tables

I can't say where glevine found his example.

This is a very good source of links to different 3 column layouts and lots of other things CSS if you go to the home page.

http://css-discuss.incutio.com/?page=ThreeColumnLayouts

Two are marked as source ordered columns. Do a text search in your browser to spot them quickly.

To put it simply, any multi-column layout can be made source ordered by treating it as
- a multi-level set of pairs of columns
- floating each column in the pair.

So a 3 column layout becomes (in a pseudo column syntax Smile)

<col 1>
<col 1.1>A</col>
<col 1.2>B</col>
</col>
<col 2>C</col>

To achieve
- ABC -- #1 float: left; #1.1 float: left; #1.2 float: right; #2 float:right
- BAC -- #1 float:left; #1.1 float: right; #1.1 float: left; #2 float: right
- CBA -- #1 float:right; #1.1 float: right; #1.2 float: left; #2 float: left

The only orders of ABC not possible are those where AB are not adjacent (e.g. BCA, ACB).

Red Matrix
Red Matrix's picture
Offline
Regular
RGV
Last seen: 12 years 39 weeks ago
RGV
Timezone: GMT-5
Joined: 2005-09-17
Posts: 24
Points: 0

3-column layout to ditch tables

That's a very good compilation list. Thank you.

Dave