eek.
1) Get rid of any "position:absolute". That is definitely not the way you want to position your DIVs. That's also the reason your DIVs aren't expanding to fit the content inside.. or above/below it (among other things)
2) To center a page, simply attribute a width to the body (800px) and set the margin to "0px auto". Don't know how much CSS you know, so let me explain. "margin: 0px auto" is the short way of typing out "margin: 0px auto 0px auto" which would be "top - right - bottom - left", respectively. "Auto" on the left/right margins will always center the element, so long as the widths allow it and are defined.
Edit:
OK.. Try this. This isn't perfect, but it's a step in the right direction.
body {
background-color: #ECECEC;
width: 800px;
margin: 0px auto;
padding: 0px;
border: 2px solid #00aeed;
}
div.container {
}
div.header {
width: 800px;
height: 120px;
background-color: white;
}
img.logo {
margin-top: 10px;
border: none;
}
div.topmenu {
width: 800px;
background-color: #00aeed;
padding: 2px 0px 2px;
text-align: center;
font-size: 12px;
font-family: Arial;
color: white;
}
div.left {
float: left;
width: 165px;
padding: 0px;
background-color: white;
}
div.right {
float:right;
width: 634px;
padding: 0px;
background-color: white;
border-left: 1px dotted #00aeed;
}
div.footer {
width: 800px;
background-color: #00aeed;
padding: 2px 0px 2px;
text-align: center;
font-size: 12px;
font-family: Arial;
color: white;
}
a.menu:link {
color: white;
text-decoration: none;
}
a.menu:hover {
background: #959595;
}
a.menu:visted {
color: white;
}
ul.list {
font-family: Arial;
font-size: 14px;
list-style-type: disc;
margin-left: -5px;
}
a.leftlist:link {
color: #007fff;
}
div.right h4 {
text-align: center;
font-family: Arial;
color: #959595;
margin-top: 30px;
}
p.heading {
font-family: Arial;
font-size: 14px;
margin-left: 10px;
margin-top: 30px;
}
p.content {
font-family: Arial;
font-size: 12px;
margin-left: 10px;
margin-right: 10px;
}
span.gipic {
float: right;
padding: 10px;
text-align: center;
margin-left: 5px;
margin-bottom: 10px;
}
3) Now, for a lesson on "clearfix". Look it up. You need to implement it on sites with floated left/right content ALWAYS. In the midst of looking that up you should also find several other fixes that you should always do.. Like the IE box model hacks, and the IE/Mac fix.
4) The CSS I made probably isn't perfect. Looks fine in FF, but IE just might like the left/right float, and you'll see the div.right BELOW the div.left instead of next to it. This normally is because of how IE interprets padding, and its crappy box model, but since there is no padding on anything, you MAY be safe.
5) Notice I got rid of all the "border-top/left/right" around EVERY element, and instead just put the 2px border around the entire body.
6)
Everything that's wrong with the HTML If you click "Tidy Source" in the Jump To menu, it'll take you down to the cleaned up source. If it messes up the page graphically, don't use it, but it might help you get rid of those 28 errors it found.
You should always check your pages at W3C... It really helps you learn that tricky XHTML syntax, like making sure you self-close tags like META, IMG, and so on.
7) You should also really get rid of any "height" attributes on your div.left/right. (I've already removed them from the CSS above) What you're doing is forcing the content to be a certain height, so you can never add any content without fidgeting with the div height.
What you should do is let the divs set their own height, but you're going to run into ONE problem. The div.left sidebar isn't going to stay white all the way down the page.
Here's a simple fix: Create a 800px by 1px (width by height) WHITE gif and change the body selector to:
body {
background: #ECECEC url(path/to/white.gif) center center repeat-y;
width: 800px;
margin: 0px auto;
padding: 0px;
border: 2px solid #00aeed;
}
8) HTML fix:
Change: <div class="right">blahblah</div>
<div class="footer">blahblah</div>
</div>
<!-- (the /div to the div.container) -->
To: <div class="right">blahblah</div>
</div>
<div style="clear:both"></div>
<!-- (you don't need anything in the DIV -->
<div class="footer">blahblah</div>
Just to make sure the footer STAYS at the bottom. When I took away the sidebar height from the CSS, the footer decided to jump up right underneath where it says "Links".
Facebook
Twitter