CSS doesn't seem to work as it should

OK. Let me start by admitting I'm completely new to CSS although I'm proficient at HTML and PHP.

I bought the SitePoint book, Designing Without Tables, and typed in their sample CSS for a 3-column layout with a header -- and it just didn't do what it said it would. Very frustrating!

Here's the CSS:

#header {
background-color: #8080FF;
color: white;
height: 100px;
margin: 20px;
padding: 10px;
}

#center {
margin-left: 220px;
margin-right: 220px;
background-color: #D0D0E2;
color: black;
}

#left {
position: absolute;
left: 10px;
top: 10px;
width: 200px;
background-color: gray;
color: white;
}

#right {
position: absolute;
right: 10px;
top: 10px;
width: 200px;
background-color: gray;
color: white;
}

#footer {
clear: both;
background-color: #8080FF;
color: white;
}

</STYLE>

and here's the HTML:

<html>

<div id="header">
<p>Contents of Header</p>
</div>

<div id="left">
<p>Contents of Left</p>
</div>

<div id="center">
<p>Contents of Center</p>
</div>

<div id="right">
<p>Contents of Right</p>
</div>

</body>
</html>

What's up with this? Why doesn't it do a 3 column layout with a header like it does in the book?

Thanks

....Vidya

CSS doesn't seem to work as it should

Weird problem

vidya

choster

vidya

aevea

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week