Page 1 of 1

3 column's again

Posted: Tue Sep 15, 2009 2:52 am
by Kind-Wizzard
Image

Using table, it's easy to create that, but how using only css? Help me please.

Re: 3 column's again

Posted: Tue Sep 15, 2009 3:59 am
by lord_webby
create what? image is a dead link

Re: 3 column's again

Posted: Tue Sep 15, 2009 4:33 am
by Kind-Wizzard
lord_webby wrote:create what? image is a dead link
my bed, sorry

Re: 3 column's again

Posted: Tue Sep 15, 2009 4:59 am
by lord_webby

Code: Select all

 
#left {
width:20%;
float:left;
}
#center{
width:60%;
max-width:600px;
float:left;
}
#right{
width:20%;
float:left;
}
 

Code: Select all

 
<div id="left">left</div>
<div id="center">center</div>
<div id="right">right</div>
 
I think that's right. Not tested.

Re: 3 column's again

Posted: Tue Sep 15, 2009 11:46 am
by kaszu
@lord In image he has fixed center and both sides needs to have different backgrounds

This will allow to have different backgrounds (repeated) for left and right sides and center is fixed width

Code: Select all

/* For testing */
body, html {
    height: 100%;
}
.left, .right, .center {
    min-height: 100%;
    height: 100%;
}
.left {
    background: red;
}
.right {
    background: green;
}
.center {
    background: blue;
}
 
/* Needed style */
body { 
    padding: 0; margin: 0;
    min-width: 900px; /* Need to set min-width to prevent content from going out of screen in IE */
}
.left {
    float: left;
    width: 50%;
}
.right {
    float: right;
    width: 49.9%; /* Fix IE rounding problem */
}
.center {
    width: 900px;
    margin: 0 -450px; /* Margin is half of the width */
    float: left;
}

Code: Select all

<div class="left"></div>
<div class="right"></div>
<div class="center">
    Boooo
</div>
Note: may require fix for IE6

Re: 3 column's again

Posted: Thu Sep 17, 2009 1:25 am
by Kind-Wizzard
Thank you, it's realy works ;)