Just starting with CSS [Archive] - Dynamic Drive Forums

burginsteve

02-14-2008, 02:37 PM

I'm trying to fit 3 columns under a top section and I can get the left-side and centre to nest together but the right-side is beneath the centre column. I know someone who knows what they're doing will spot why.

This is my CSS

#header {
height: 120px;
background-color:#0033FF
}

#leftcol {
width: 210px;
float: left;
background-color:#00CCFF
}

#centrecol {
width: 570px;
margin-left: 210px;
background-color:#00CCCC
}

#rightcol {
width: 190px;
float: right;
background-color:#00CCFF
}

and this is my HTML

<body>
<div id="header">This is the header area</div>
<div id="leftcol">This is the left column</div>
<div id="centrecol">This is the centre column</div>
<div id="rightcol">This is the right column</div>
</body>

Please... what changes need to be made to make the right-side level with the other two columns?

Jas

02-14-2008, 07:19 PM

Your centercol needs to float left as well, and sometimes you need to make the width of the columns 1px smaller then the window, just in case. I think the problem here is that the center column needs to float left. I would also have the right column float left, if possible.

EDIT: You had another problem.

#centrecol {
width: 570px;
/*needs to float left*/
margin-left: 210px; /*What is that for? It is blocking the right column*/
background-color:#00CCCC
}

#rightcol {
width: 190px;
float: right; /*I could make that float left instead*/
background-color:#00CCFF
}

Here is the solution:

#header {
height: 120px;
background-color:#0033FF
}

#leftcol {
width: 210px;
float: left;
background-color:#00CCFF
}

#centrecol {
width: 570px;
float:left;
background-color:#00CCCC
}

#rightcol {
width: 190px;
float: left;
background-color:#00CCFF
}

It seems to work :)