CSS 3 Columns trouble

edd1e · 12 Sep 2007 at 07:52

Hi guys,

I finally decided to start using CSS for layout's instead of tables, i was stuck in my old ways.

I have a simple layout and i want 3 columns about a third down the page like this: (excuse my leet paint skills)

i can make 2 columns work just not 3. i obviously have the left as float: left; and the right as float: right; but not sure what to do with the center one and also they all seem to be a on a new line.

I think this may have something to do with positioning?

Heres what i have so far:

CSS:

Code:

body {
text-align: center; /* center's things in pre IE6 */
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

#container {
margin: auto;
width: 556px;
height: auto;
text-align: left;
background-color: #CCCCCC;
}

#navbar {
width: 556px;
padding: 0px;
height: 35px;
}

#header_image {
width: auto;
background-color: #009999;
height: 35px;
}

#latest_news {
width: auto;
background-color: #009999;
height: 35px;
min-height: 35px;
}

#news_left {
float: left;
width: 185px;
margin: 0;
background-color: #000099;
padding: 0px;
height: 150px;
min-height: 150px;
}

#news_center {
margin-left: 185px;
margin-right: 185px;
width: 185px;
margin: 0;
background-color: #333333;
padding: 0px;
height: 150x;
min-height: 150px;
}

#news_right {
float: right;
width: 185px;
margin: 0;
background-color: #666666;
padding: 0px;
height: 150px;
min-height: 150px;
}

#footer {
clear: both;
}

The ones i'm interested in are: news_left / news_center / news_right

Heres the HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="container">

<div id="navbar"> </div>

<div id="header_image"> </div>

<div id="latest_news"> </div>

<!-- start 3 columns -->

<div id="news_left"> </div>

<div id="news_center"> </div>

<div id="news_right"> </div>

<div id="footer"> </div>

</div>

</body>
</html>

This is what it makes:

Cheers guys.

edd1e · 12 Sep 2007 at 09:32

I've managed to achine what i'm looking ro using this: http://www.tjkdesign.com/articles/3cols.asp

Still if anyone knows what i was doing wrong would be great

EDIT: ^^ thats not a great way of doing it really, any better ways?

Tripnologist · 12 Sep 2007 at 10:33

#news_center

float that as well.

edd1e · 12 Sep 2007 at 10:36

Tripnologist said:
#news_center

float that as well.

float it as what though? left right? no such thing as a float center is there?

Tripnologist · 12 Sep 2007 at 10:39

I floated it to the left when I tested it but right should work fine as well.

huppy · 12 Sep 2007 at 11:00

Without reading your whole post, there shouldn't be any need to float the center column aswell.

Put the HTML for the center column below the two floated columns, and set its left and right margins to something larger than the respective floated column's width.

edd1e · 12 Sep 2007 at 11:01

Tripnologist said:
I floated it to the left when I tested it but right should work fine as well.

Your a legend!

that worked nicely. knew it would be something simple lol

Just 1 more question, when i insert loads of text into a column is expands but the other 2 columns obviously do not. i have set them to 100% height to try and fill the container but no luck. Any ideas?

Cheers mate your a big help

Mixeh · 13 Sep 2007 at 12:49

eddie500 said:
Your a legend! that worked nicely. knew it would be something simple lol

Just 1 more question, when i insert loads of text into a column is expands but the other 2 columns obviously do not. i have set them to 100% height to try and fill the container but no luck. Any ideas?

Cheers mate your a big help

Google 'faux columns', theres a decent article on a list apart for them from what i remember.