Forum Moderators: not2easy

Message Too Old, No Replies

CSS Layout Help

I've searched and searched, but can't figure it out

         

atad6

1:21 pm on Mar 2, 2005 (gmt 0)

10+ Year Member



Hi,
I'm a new member here. I'm having some problems trying to figure out something in CSS. I've searched all over the internet but can't really find a solid explanation.
Anyway, I'm trying to create a fixed width three column layout where the two outer columns expand in height with the center column. I've used floats, but I think this is the incorrect method since when the center column expands the outer two columns do not. I'd just like some insight on to what I could do to accomplish this. Thanks!

atad6

1:52 pm on Mar 2, 2005 (gmt 0)

10+ Year Member



I think I figured it out. I used this article here to help:

[builder.com.com...]

4css

3:25 pm on Mar 2, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi atad6, welcome to webmasterworld.

If you post some of your code It would be a bit easier to know what you are doing.

Also, if you search google for fixed 3 column layout, a good deal of information will come up on it with demos that you can view code on to study.

Hope this helps!

createErrorMsg

5:44 pm on Mar 2, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Thanks to the tireless efforts of this forums members and illustrious moderators, you need look no further than the CSS Forum Library [webmasterworld.com], this thread [webmasterworld.com] in particular, to find several viable solutions.

cEM

atad6

3:29 am on Mar 3, 2005 (gmt 0)

10+ Year Member



So I've looked through those layouts and the recent post made about a layout with a 100% height. I had another idea, and wanted some feedback before I start working on it. I want a layout with a fixed width that is centered (easy enough), with a header bar. Then below this is a three column layout (which i have seen before). The problem is, i just haven't seen one where the side columns automatically extend to the length of the longest column (usually the middle). So here is my idea:

1. Create three absolutely positioned columns (divs) that are each 100% in height.

2. Create an absolutely positioned header that will go on top of this by using z-index.

3. Create a footer that automatically is at the bottom of the page, overtop of the bottom of the columns (since they are 100% in height), is this possible?

So pretty much I create the columns with a height of 100% each and place the other elements, header, footer etc, on top of them. This would allow me to control the style of each column (background color, border ,etc) and have it extend the whole page and not just stop where the content ends. This idea just seems to easy and I haven't found really any tutorials on it. Does it sound feasible or am i just crazy?