Footer Layout out of whack

HTML & CSS
1

Hi,

site is located at http://www.defineme.ca

You will see that the footer layout is all out of whack. If you look at it in firebug it’s saying the first and second boxes are nested which they are not they are separated but the corresponding DIV tags. Is there something I’m missing here??

<div id="footer">
	<div class="top">
    	<div class="listBox">
            	<h3>Social Media</h3>
            	<ul>
                    <li><a href="http://www.facebook.com/DefineMePT">Facebook</a></li>
                    <li><a href="http://twitter.com/#!/DefineMePTt">Twitter</a></li>
                    <li><a href="http://www.linkedin.com/pub/michelle-pitman/20/1b1/ab8>Linked In</a></li>
                </ul>
        </div>
        <div class="listBox">
       	  	<h3>Sitemap</h3>
            	<ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="/about">About</a></li>
                    <li><a href="/services">Classes</a></li>
                    <li><a href="/contact">Contact Us</a></li>
                </ul>
        </div>
        <div class="listBox">
       	  <h3>Blog Posts</h3>
        </div>
        <div class="listBox">
        	<h3>Contact Us</h3>
            	<p>Define Me Persoanl Training<br />
                P:905-441-1524<br />
                E:info@defineme.ca</p>
        </div>
    </div>
</div>
</body>
</html>

And the corresponding CSS

#footer {
    margin:0px auto;
    background: none repeat #ccc;
    clear:both;
    color: #fff;
    display: block;
    font-family: droid-serif,Georgia,Times,serif;
    font-size: 12px;
    height: 210px;
    line-height: 15px;
    width: 100%;
}

#footer .top {
    margin: 0 auto;
    overflow: hidden;
    padding: 24px 0 14px;
    width: 960px;
}

#footer .listBox {
    background: url("images/bg_footer_listdivider.jpg") no-repeat scroll right top transparent;
    float: left;
    min-height: 170px;
    overflow: hidden;
    padding: 0 0 0 20px;
    width: 220px;
}

#footer .listBox p {
	font-size:1.2em;
	line-height:1.8em;
	color#fff;
}

#footer .listBox h3 {
    font-size: 1.6em;
	color:#fff;
    font-weight: bold;
    margin: 0 0 0.8em;
}

#footer .listBox ul li {
    font-size: 1.3em;
    list-style: none outside none;
    margin: 0 0 0.8em;
}


#footer .listBox ul li a {
    color: #fff;
    line-height: 1.4em;
    text-decoration: none;
}
2

Did you fix this? All the listboxes seem to be a separate entity in the footer, and nothing is really displaying “out of whack” (which is a horrible way to describe the problem, sorry to say :p).

3

Hi,

I checked out your website and you seem to fixed the issue. Anyway I had this bottom alignment css code prepared. My example creates a footer in bottom of the container.

<html>
<head>
<title>CSS Text Alignment </title>
</head>
<body>
<style type=“text/css”>
#container
{
position: relative;
height: 150px;
border: 1px solid;
}
#bottom-content
{
position: absolute;
bottom: 0;
left: 0;
}
</style>
<div id=“container”>
<h1>
Header text</h1>
<div id=“bottom-content”>
bottom content</div>
</div>
</body>
</html>