3 column's again

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
Kind-Wizzard
Forum Newbie
Posts: 7
Joined: Thu Sep 10, 2009 11:59 am
Location: Moon

3 column's again

Post by Kind-Wizzard »

Image

Using table, it's easy to create that, but how using only css? Help me please.
User avatar
lord_webby
Forum Commoner
Posts: 44
Joined: Wed Aug 19, 2009 9:01 am

Re: 3 column's again

Post by lord_webby »

create what? image is a dead link
Kind-Wizzard
Forum Newbie
Posts: 7
Joined: Thu Sep 10, 2009 11:59 am
Location: Moon

Re: 3 column's again

Post by Kind-Wizzard »

lord_webby wrote:create what? image is a dead link
my bed, sorry
Attachments
Untitled-1.png
Untitled-1.png (14.94 KiB) Viewed 2376 times
User avatar
lord_webby
Forum Commoner
Posts: 44
Joined: Wed Aug 19, 2009 9:01 am

Re: 3 column's again

Post 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.
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: 3 column's again

Post 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
Kind-Wizzard
Forum Newbie
Posts: 7
Joined: Thu Sep 10, 2009 11:59 am
Location: Moon

Re: 3 column's again

Post by Kind-Wizzard »

Thank you, it's realy works ;)
Post Reply