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?

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?

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