Anyways, I'm practicing coding a layout out of my CSS book, and I haven't had any problems with doing the layouts up until now. My problem is that my two side columns hover below my content column, and no matter what I do I cannot seem to get them to move up so they are right beside my content column. This is a fixed layout.
I've went and used both the CSS and XHTML validator, and it is all clean. As well as looking over it countless times and finding nothing wrong with the code. Here is my code, as well as a screen shot of what is happening.
I also noticed that the whole thing seemed to have shifted to the left side of the page. I'm pretty sure it is because I haven't defined any padding for the entire layout, but I think I am still missing something here::EDIT::Come to think of it, it might simply be because it is fixed at about 768px, and so looks weird on my screen res, but better on 800x600..Anyways.
CODE
body {
width:760px;
margin:10px;
font-size:80%;
font-family:"Lucida Grande",Verdana,sans-serif;
background-color:#000;
}
#masthead {
width:738px;
margin:0 0 10px 0;
padding:10px;
border:1px solid #000;
background-color:#CCC;
}
#content {
width:338px;
margin-left:200px;
margin-right:200px;
margin-bottom:10px;
padding:10px;
border:1px solid #CCC;
}
#sidebar_a {
float:left;
width:158px;
margin-bottom:10px;
padding:10px;
border:1px solid #CCC;
color:#F00;
}
#sidebar_b {
float:right;
width:158px;
margin-bottom:10px;
padding:10px;
border:1px solid #CCC;
color:#F00;
}
#footer {
clear:both;
width:738px;
padding:10px;
border:1px solid #000;
background-color:#CCC;
}
h1 {
font-size:150%;
color:#fff;
}
h2 {
font-size:140%;
color:#fff;
}
h3 {
font-size:120%;
color:#fff;
}
p {
font-size:100%;
line-height:150%;
color:#F00;
}
CODE
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Chapter 11:Classic Layouts</title>
<link rel='stylesheet' media='screen' type='text/css' href='columns.css' />
</head>
<body>
<div id="masthead">
<h2>Masthead</h2>
</div>
<div id="content">
<h2>Content</h2>
<p>Hello.I am James Starner. I created and run Overtone Sound by myself. I specialize in
multimedia.</p>
</div>
<div id="sidebar_a">
<h2>Sidebar A</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
<div id="sidebar_b">
<h2>Sidebar B</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h2>B</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
<div id="footer">
<h2>Footer</h2>
</div>
</body>
</html>
And the screen shot::
