Mon, 2006-06-26 20:30
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!
Mon, 2006-06-26 20:39
#1
Re: 2-column static left, fluid right, with header & 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.
Mon, 2006-06-26 20:41
#2
2-column static left, fluid right, with header & footer
No you can't cheat! 
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.
Mon, 2006-06-26 21:50
#3
2-column static left, fluid right, with header & footer
My left column needs to stay at least 280px wide. Is this possible with floats, without making the layout fail when shrinking it?
Mon, 2006-06-26 22:03
#4
2-column static left, fluid right, with header & 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?
Mon, 2006-06-26 22:13
#5
2-column static left, fluid right, with header & 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.
Mon, 2006-06-26 22:59
#6
2-column static left, fluid right, with header & 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!
Mon, 2006-06-26 23:17
#7
2-column static left, fluid right, with header & 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.