3 column CSS layout

layout issue

[alpo72]

This might be basic for you all but.....

creating a 3 column layout, have a header bar, left column, middle column, right column, footer bar. Problem - the right column is showing up beneath the left and middle column. I have used the float left command for all three within the stylesheet and the left and middle column show fine. Any help? code below.

.top {
width: 900px;
height: 200px;
background-color: red;
float: left;

}

.lcolumn {
width: 250px;
height: 500px;
background-color: black;
font-color: white;
float: left;
}

.content {
width: 400px;
height: 500px;
background-color: blue;
font-color:
float: left;
}

.rcolumn {
width: 250px;
height: 500px;
background-color: green;
font-color:
float: left;

}

.bottom {
width: 900px;
height: 200px;
clear: both;
background-color: red;

}

[jameshopkins]

Remove 'font-color' from both '.rcolumn' and '.content', these are invalid property names anyway.

That will fix it.

The reason why these would be the cause, is that you haven't included a delimter (semi-colon) after the 'font-color' property name, in both instances. Please refer to CSS 2.1 Error Parsing Rules [w3.org] for a detailed explanatation as to why this is happening.

James

[alpo72]

thank you! i realized that they were incorrect property names but did not know that would affect the layout

[jameshopkins]

I realised that they were incorrect property names

So why do they exist in your stylesheet?

The reason why your issue ocurred is that, since CSS parsers ignore white space, they see 'font-color:float:left;' which of course is a malformed property.