I’m so new to css that I hope I expain my problem correctly. I appoligize to everyone as I believe part of this question has been asked before, which advice I took, but it created another problem for me. 1st my container isn’t expanding to include my entire footer. 2nd my footer has a top border that’s getting pushed to appear under my nav bar in ie8. Please help? Here is my css sheet. By the way, I’m sorry, and thank you.
body {
background-color: #D2FFBF;
font-family: Verdana, Geneva, Tahoma, sans-serif;
border:0px; text-decoration:none;
}
#container {
border: thin solid #999999;
width: 800px;
background-color: #FFFFFF;
margin: 10px auto 10px auto;
padding: 10px 5px 5px 10px;
overflow: hidden;
}
#logo {
height: 107px;
}
#masthead {
height: 129px;
border-top-color: #8CFE68;
border-bottom-color: #8CFE68;
border-top-width: medium;
border-bottom-width: medium;
border-top-style: solid;
border-bottom-style: solid;
}
#topnav {
height: 20px;
}
#detailsleft {
width: 305px;
position: relative;
float: left;
padding-top: 5px;
height: 1270px;
margin-bottom: 5px;
}
#detailsright {
width: 480px;
position: relative;
float: right;
font-size: small;
background-color: #FFFFFF;
padding-top: 5px;
padding-left: 5px;
height: 1440px;
margin-bottom: 5px;
}
#footer {
font-size: small;
font-family: Verdana, Geneva, Tahoma, sans-serif;
width: 800px;
We’d really need to see the HTML behind it as well. Have you got an example you can link to, so we can see it in action?
2nd my footer has a top border that’s getting pushed to appear under
Hi Leah, Welcome to SitePoint 
Your footer has floats above it, you will need to clear them.
Add clear:both; to your footer rules
You should be able to do away with the relative positioning on the floats too.
Would be best to remove those fixed heights if there is fluid height content in those divs.
As Stevie said, we need to see the html if you need more help with it.
Have a look through the SP CSS reference to learn how to use shorthand properties, specifically where you are defining the longhand version on your border styles. That will trim your code down. 
Thank you so much for the responses. It will take me a while to complete what you said to do but I will do it (still learning). I’m going to appologize in advance for my html doc attached. I have to use expression web 3 because thats whats required of me. this website i’m working on is for a nonprofit. i’m sure thats part of my problem. please forgive me. I also hope that i didn’t remove from the document some important info you need. I also hope I attached this correctly. I’m so grateful for all the help. Thank you, thank you, thank you!
I’ve attached the html in my last response. Since that time I’ve made the changes to the heights and put the clear in. My container now expands (yay!) and my top footer border is in the correct place (yay again!). However, if I remove the “logo” height the whole site seems to move up onto the logo area, and if I remove the height in “masthead” the top border moves to the top of the site. These two I put back and all still works. Another however though, is that my image in “details right” no longer floats to the right even though float right is still in the properties. Help!
Hi,
If an element contains only floats then it will have no height unless you use a float clearing technique because floats are effectively removed from the flow. This would seem to be the main problems that you are encountering.
The easiest method to clear floats is to add overflow:hidden to the float’s parent and that will make it contain its floated children (ie7 and under need haslayout instead - see the CSS FAQ on floats).
Avoid heights on your columns because content will never be an exact height and it should be the content that dictates the height and not you. Content needs room to breathe and expand when text is resized so heights on text content is really a big no no.
Try and add some structure to your page as you have no h1 heading (the most important thing on any page) and then some way down the page you have h5 headings. You can’t have an h5 heading if there have been no h1,h2,h3 and h4 headings previous to it because that makes no sense. Headings must be logical.
The details right image is floating right but you will need to clear any content to the right if you want it at the edge (clear:right).
Don’t use classnames like .pinkfont as that is bad practice. Use a more generic but still descriptive term (such as .highlight, .warning etc…) so that the class name doesn’t rely on its appearance. The reason is that if you decide that you would like the text green at a later date then you would have a class called .pinkfont which gives you green text - which is clearly nonsense.
You also have a lot of spans and breaks for your content which would seem incorrect as it is more likely to be paragraphs or divs that you should be using but as you haven’t put in the real content it’s hard to say what should be what.
In most cases it’s the real content that defines what html elements you should be using and not vice versa.
I’ve removed a couple of heights and cleared a couple of floats and added some background colours to see where everything is placed but this needs a lot more work and needs an example of real content so that all the correct html elements can be used instead of those spans and breaks that are currently in place.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>xxx</title>
<meta name="keywords" content="xxx" />
<meta name="description" content="xxx" />
<link rel="stylesheet" type="text/css" href="main.css" />
<style type="text/css">
.center {
text-align: center;
}
.left {
text-align: left;
}
.bold {
font-weight: bold;
}
.calendartable {
font-size: xx-small;
background-color: #DDEAFF;
}
.calendartable td{vertical-align:top}
.font {
font-size: xx-small;
}
.pinkfont {
color: #FF0066;
}
.contactinfo {
font-size: small;
float: right;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: #808080;
}
</style>
<link rel="stylesheet" type="text/css" href="main2.css" />
<style type="text/css">
html, body {
border:0;
margin:0;
padding:0;
}
body {
background-color: #D2FFBF;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-decoration:none;
}
#container {
border: 1px solid #999999;
width: 800px;
background-color: #FFFFFF;
margin: 10px auto 10px auto;
padding: 10px 5px 5px 10px;
overflow: hidden;
}
#logo {
background:red;
width:100%;
overflow:hidden;
}
#logo h1{margin:0}
#masthead {
border-top:2px solid #8CFE68;
border-bottom:2px solid #8CFE68;
}
#topnav {
height: 20px;
}
#detailsleft {
width: 305px;
position: relative;
float: left;
padding-top: 5px;
margin-bottom: 5px;
background:green;
}
#detailsright {
width: 480px;
position: relative;
float: right;
font-size: small;
background-color: #FFFFFF;
padding-top: 5px;
padding-left: 5px;
margin-bottom: 5px;
background:blue;
}
#footer {
font-size: small;
font-family: Verdana, Geneva, Tahoma, sans-serif;
width: 800px;
border-top:2px solid #8CFE68;
clear:both;
}
#horizontal-nav{
margin:10px 0;
padding:0;
list-style:none;
}
#horizontal-nav li{display:inline;margin:0 10px 0 0}
</style>
</head>
<body>
<div id="container">
<div id="logo">
<h1><img alt="Site Name here" src="siteImages/DCHFH_logo%20new.jpg" width="295" height="107" style="float: left" /></h1>
<div class="contactinfo">xxx<br />
xxx<br />
xxx<br />
xxx<br />
<a href="mailto:xxx">XXX</a></div>
<div id="contactinfo"> </div>
</div>
<div id="masthead"><img alt="tophead" src="siteImages/top_head800px.jpg" width="800" height="129" /></div>
<ul id="horizontal-nav">
<li><a href="index.html">Home</a></li>
<li><a href="xxx.html">xxx</a></li>
<li><a href="xxx.html">xxx</a></li>
<li><a href="xxx.html">xxx</a></li>
<li><a href="xxx.html">xxx</a></li>
<li><a href="xxx.html">xxx</a></li>
<li><a href="xxx.html">xxx</a></li>
</ul>
<div id="details">
<div id="detailsleft">
<div id="detailsleftcol">
<table cellspacing="12" class="calendartable" cellpadding="0">
<tr>
<td colspan="3" class="center bold">2011 Calendar of Events</td>
</tr>
<tr>
<td>Feb 6</td>
<td>Winter Fest<br />
xxx</td>
<td>Parade 10:30</td>
</tr>
</table>
</div>
</div>
<div id="detailsright">
<h4 class="contactinfo">xxx.org</h4>
<p><strong class="pinkfont">xxx</strong><br />
<img class="" alt="test" src="siteImages/BW_handimage.jpg" width="200" height="133" style="float: right;clear:right;background:yellow" /><br />
xxx,<br />
xxx,<br />
xxx,<br />
xxx.<br />
<br />
xxxxxxxxxxxxxx.<br />
<br />
xxxxxxx <span class="bold">xxxxxx</span>. xxxxxxxxxx<br />
<a href="Articles/xxx_application2011.pdf">xxx</a> xxx</p>
<p class="center"> ***********************<br />
</p>
<h5>XXX</h5>
<p>xxxxxxxxxx.</p>
<h5>XXX</h5>
<p>xxxxxxxxxx <span class="font"><a href="Articles/Perspective.pdf">Perspective</a></span></p>
<h5>XXXXX.</h5>
<p>xxxxxxxxxxxxx<br />
<a href="Articles/xxx.pdf">XXX</a>.<br />
</p>
<p class="center"><img alt="xxx" src="siteImages/vinyl_siding_install.jpg" width="250" height="193" /></p>
<p class="left bold">xxxxx.</p>
</div>
</div>
<div id="footer">
<p class="textalign"><img alt="logo" src="equal_opportunityLogo.JPG" width="80" height="85" style="float: left" /><br />
xxxx<br />
xxxx <br />
xxxx <br />
xxxx.<br />
<br />
<br />
<span class="font">Copyright © 2011 xxx</span><br />
</p>
</div>
</div>
</body>
</html>
To recap you need to think up better classnames and then use logical html elements that suit the content you are using. If something is a heading then it should be in a heading element of the correct level. (Never use elements just because of what they look like).
If something is a paragraph then use a p element. (Addresses can go in the address element.) Breaks should only be used to break lines up and not simply to make space or to create new paragraphs. Most pages will have very few breaks as they are only needed for things like poems, addresses, and form elements. The rest of the time you can use margins on existing elements to make the required space.
Rather that attaching yout code you can simply paste it into code tags as I have done above but put the css in the head while testing (after testing all css should be external). We will need ot see your code eac h time you change it otherwise we won’t know what you are currently working with.
Stevie D, Rayzur, Paul O’B,
Please don’t give up on me! In the process of trying to make the suggested changes I goofed up on something and have to start over. I will have limited access to a computer for the next two weeks, sadly. Please, please stay with me as I try to take all of your suggestions and make this happen, but will not be able to communicate well. Again, thank you for your patience and help. I will communicate as I can.