View Full Version : 3 column layout and width 100%

11-03-2008, 09:42 AM
God I don't know if I ever over came this problem before or just can't remember a solution I have floating up in my head somewhere but how the heck do I get a 3 column layout to work while the the middle column is at a width:100%?

Here is my code:

<div style="width:500px; position:relative;">
<div style="width:20px; position:absolute; left:0px; height:20px;"></div>
<div style="height:20px; width:100%; margin:0 20px 0 20px; background-color:#000;">s</div>
<div style="width:20px; height:20px; right:0px; position:absolute;"></div>

So I have a content wrapper for the 3 columns in order to accomplish a relatively absolute position for the left and right column. Then I am setting the left and right columns to a width and height of 20px. I however need to have the center column be a width of a 100% but this breaks the right column if I use a left/right margin of 20px or not.

How do I have a left column(20px) center column(100%) and right column (20px)??


11-03-2008, 09:51 AM
DUH width:auto; ... why did I forget that.

<-- calls doctor house.

Major Payne
11-05-2008, 03:49 AM
When I get a brain drain with that kind of problem, I go to Fixed Width CSS Layouts (http://www.code-sucks.com/css%20layouts/fixed-width-css-layouts/) for a refresher. Lots of examples.

11-05-2008, 06:39 AM
dunno what you're trying to get at.. but i think.. your method is wrong...

using absolute positioning in attaining a 3 column layout.. is a definite no no..

hmm.. let me rephrase that... using absolute positioning is a definite no no.. not unless there's no other way to fix your page...

if i were you... i'll just float my divs... liquid style... ^__^

11-05-2008, 06:59 AM
i'm not see any margin left,center and right.
you should put that in div = "center,left or right"/>