7 replies [Last post]
adentone
Offline
Regular
Spokane, WA
Last seen: 16 years 40 weeks ago
Spokane, WA
Timezone: GMT-8
Joined: 2005-02-24
Posts: 15
Points: 0

I am almost there:
http://www.dentone.net/orly/products.php
http://www.dentone.net/orly/common/css/default.css

All pages validate XHTML Trans and CSS.

How do I make sure the footer doesn't "creep" up under the absolutely positioned left column?
clear: both; doesn't seem to be working, but I guess it shouldn't because the left column is positioned absolutely...

I can cheat and put in <br> enough times to get the content long enough, but I don't like cheating...

Any suggestions?
Thanks!

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 1 day ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Re: 2-column static left, fluid right, with header &amp; foo

adentone wrote:
I
How do I make sure the footer doesn't "creep" up under the absolutely positioned left column?

You shouldn't be using absolute positioning to create columns. You should be using floats.

There are some excellent messages in the How To section about doing this.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

2-column static left, fluid right, with header &amp; footer

No you can't cheat! Smile using br in this manner is not acceptable good markup practise.

As you have hinted at your problem lies with the use of absolute, kiss it goodbye and turn your affections towards floats.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

adentone
Offline
Regular
Spokane, WA
Last seen: 16 years 40 weeks ago
Spokane, WA
Timezone: GMT-8
Joined: 2005-02-24
Posts: 15
Points: 0

2-column static left, fluid right, with header &amp; footer

My left column needs to stay at least 280px wide. Is this possible with floats, without making the layout fail when shrinking it?

adentone
Offline
Regular
Spokane, WA
Last seen: 16 years 40 weeks ago
Spokane, WA
Timezone: GMT-8
Joined: 2005-02-24
Posts: 15
Points: 0

2-column static left, fluid right, with header &amp; footer

ok, I have modified the columns to be floats - and it really messed up my layout. any ideas?

can you point me in the right direction?

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 1 day ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

2-column static left, fluid right, with header &amp; footer

adentone wrote:
ok, I have modified the columns to be floats - and it really messed up my layout. any ideas?

can you point me in the right direction?

Well, maybe do a little research first? There's a link in this site that will generate the kind of layout you want for you. There's plenty of messages in the various forums on how to do it as well. Try the "How To" forum perhaps?

But a two column layout in the way you want it is straightforward. For expanitory purposes I'm assuming two wrapper divs with id="left" and "right". Left comes first in the html source, that's important.

Give "left" a width in either px or % or ems, depending on the effect you want. Also give it a float:left.

Now with "right" do not float it. You only need one float for two columns. The only thing you need to do with "right" is give it a left margin greater than the width you've already given "left" in the same units. Don't give it a width - it will expand automatically to occupy the rest of the width on whatever screen is viewing it.

Voila! - "left" will have the width you want, and "right" will occupy the right side of the page, however wide it is.

Don't get fixated on "left" and "right" for the names, though. Not very semantic. If the left column is for navigation give it the ID "navigation" or "nav" to describe it's purpose. Likewise "right" could be called "content" if that's what it's for. The point is to describe the meaning of your markup.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

adentone
Offline
Regular
Spokane, WA
Last seen: 16 years 40 weeks ago
Spokane, WA
Timezone: GMT-8
Joined: 2005-02-24
Posts: 15
Points: 0

2-column static left, fluid right, with header &amp; footer

Ed Seedhouse wrote:

Well, maybe do a little research first? There's a link in this site that will generate the kind of layout you want for you. There's plenty of messages in the various forums on how to do it as well. Try the "How To" forum perhaps?

I have been doing research, and I found many examples that either used a static width or absolutes. I was almost there, too - if I had left out my "float: right" for the right ("content") column, and had I switched the flow of the document to have the left column ("flavor") show up first, I would have found my solution faster.

Ed Seedhouse wrote:

But a two column layout in the way you want it is straightforward. For expanitory purposes I'm assuming two wrapper divs with id="left" and "right". Left comes first in the html source, that's important.

This was very helpful!

Ed Seedhouse wrote:

Give "left" a width in either px or % or ems, depending on the effect you want. Also give it a float:left.

Now with "right" do not float it. You only need one float for two columns. The only thing you need to do with "right" is give it a left margin greater than the width you've already given "left" in the same units. Don't give it a width - it will expand automatically to occupy the rest of the width on whatever screen is viewing it.

This was very helpful!

Thank you!

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 1 day ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

2-column static left, fluid right, with header &amp; footer

adentone wrote:

Ed Seedhouse wrote:

Left comes first in the html source, that's important.

This was very helpful!

Ed Seedhouse wrote:

Give "left" a width in either px or % or ems, depending on the effect you want. Also give it a float:left.

Now with "right" do not float it. You only need one float for two columns. The only thing you need to do with "right" is give it a left margin greater than the width you've already given "left" in the same units. Don't give it a width - it will expand automatically to occupy the rest of the width on whatever screen is viewing it.

This was very helpful!

Glad I could help. I hasten to add that this advice is not original with me, but is just a playback of what I learned reading messages on this site.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.