Making my page 3 column CSS

[TheServant]

Hey guys,
I am trying to get my page to be 3 columns, with a liquid center one.

The CSS concerned is:

div.container {
    width: 100%;
    margin: 0 auto;
    border: 0px;
}
div.center_content {
    background-color:#0033FF;
    position: relative;
    left: 200px;
    float: left;
}
div.left_content {
    background-color:#770000;
    width: 200px;
    left: 0;
    position: relative;
    float: left;
}
div.right_content {
    background-color:#7733FF;
    width: 200px;
    right: 0;
    position: relative;
    float: right;

The html:
[HTML]<div class="container">
<div class="left_content">
<p>Left Content</p>
<some code />
</div>
<div class="center_content">
<p>Center Content</p>
<some code />
</div>
<div class="right_content">
<p>Right Content</p>
<some code />
</div>
</div>[/HTML]

Basically I want the middle column to fill all the space between the left and right (fixed-width) columns, but I can't seem to get the CSS right for center_content.

[harshmaul]

Your always going to get this problem unless you use fixed sizes for everything.

Either use pixels as the measure or percent. not both.


heres two style for youto see what i mean

div.container {
    width: 800px;
    margin: 0 auto;
    border: 0px;
}
div.center_content {
    background-color:#0033FF;
    width: 600px;
    float: left;
}
div.left_content {
    background-color:#770000;
    width: 200px;
    float: left;
}
div.right_content {
    background-color:#7733FF;
    width: 200px;
    float: left;
}

div.container {
    width: 100%;
    margin: 0 auto;
    border: 0px;
}
div.center_content {
    background-color:#0033FF;
    width: 60%;
    float: left;
}
div.left_content {
    background-color:#770000;
    width: 20%;
    float: left;
}
div.right_content {
    background-color:#7733FF;
    width: 20%;
    float: left;
}

[TheServant]

This guy has done it, but I want to know why you need all the container div's:
Holy Grail 3

His CSS goes like:

.holygrail {
background:#FFFF99 none repeat scroll 0%;
}
.holygrail .colmid {
background:#FFFFFF none repeat scroll 0%;
float:left;
margin-left:-200px;
position:relative;
right:100%;
width:200%;
}
.holygrail .colleft {
background:#FFD8B7 none repeat scroll 0%;
float:left;
left:400px;
margin-left:-50%;
position:relative;
width:100%;
}
.holygrail .col1wrap {
float:left;
padding-bottom:1em;
position:relative;
right:200px;
width:50%;
}
.holygrail .col1 {
left:200%;
margin:0pt 215px;
overflow:hidden;
position:relative;
}
.holygrail .col2 {
float:right;
position:relative;
right:15px;
width:170px;
}
.holygrail .col3 {
float:right;
left:50%;
margin-right:45px;
position:relative;
width:170px;
}

His html:
[HTML]<div class="colmask holygrail">
<div class="colmid">
<div class="colleft">
<div class="col1wrap">
<div class="col1">
{..code..}
</div>
</div>
<div class="col2">
{..code..}
</div>
<div class="col3">
{..code..}
</div>
</div>
</div>
[/HTML]

[drhowarddrfine]

Though CSS is the best way to layout a page, when you go for general-purpose and ultimate flexibility, everything must be accounted for. And when you have to include all the "IE fixing", the markup can get pretty big.

iow, a baby's gotta do what a baby's gotta do! (Who can tell me what that line is from?) :)

[harshmaul]

sounds like something tommy would say from rugrats.

[drhowarddrfine]

Your favorite show, too?! :)

[TheServant]

OK, so all that is necessary. I thought so, but hoped I could find a way to get by the fixes. Thanks for you help guys.

[Markus]

Your favorite show, too?! :)

I absolutely hated angelica.
Always thwarting tommy n the gangs plans.
>=[