...

View Full Version : RESOLVED Why Isn't Footer Div Appearing at the Bottom?



jihanemo
10-31-2009, 08:18 AM
I have the footer div surrounded by comments at the bottom. I thought my footer div would appear at the bottom of the "sidebar" and "content" divs since I positioned it after the sidebar and content divs which are floating NEXT to each other... *sigh* What can I do? The footer div should be appearing at the very bottom and not inside my content div...

http://americanchic.net/blankPINK2.html

Excavator
10-31-2009, 08:39 AM
Hello jihanemo,
I added an id so you can style your footer from your CSS.
The overflow:auto; in .outerwrapper clears your floats. Here's a site that explains how that works - http://www.quirksmode.org/css/clearing.html




div.outterwrapper {

background: #ffffff;
width: 850px;
margin-top: 10px;
margin-right: auto;
margin-left: auto;
overflow: auto;

}

#footer {
clear: both;
}div.logo {

border-width: 0 0 2px 0;
border-style: solid;
border-color: #f7edf0;
padding: 15px 0 0 7px;

}
Also, add this to your markup -


</div>

</div>

<div id="footer">

<!-- Footer End -->

<a href="http://www.americanchic.net/sale.html"><img src="http://www.americanchic.net/website_graphics/footer_sale.jpg" alt="Shop Sale"></a><img class="footerblock" src="http://americanchic.net/website_graphics/footer_social.jpg" alt="Social Networks" usemap="#Social Networks" width="140" height="80"><map name="Social Networks" id="Social Networks"><area shape="rect" coords="13,43,46,76" href="http://www.twitter.com/celebritychic" target="_blank" title="Follow Us On Twitter" alt="Follow Us On Twitter"><area shape="rect" coords="53,43,85,76" href="http://www.myspace.com/americ

jihanemo
10-31-2009, 08:46 AM
Thanks! One more question - I'm using an image map on the 2nd footer image and I think that's causing the rest of the images to drop to the next line. How can I fix that? I think it has to do w/ the fact that not all of the entire code for the image map is physically on 1 line in my txt file...

Excavator
10-31-2009, 03:26 PM
Thanks! One more question - I'm using an image map on the 2nd footer image and I think that's causing the rest of the images to drop to the next line. How can I fix that? I think it has to do w/ the fact that not all of the entire code for the image map is physically on 1 line in my txt file...

Line breaks in your code should not affect how your page looks in a browser. Just float the elements in your footer... like this -


div.content {

background: #ffffff;
width: 693px;
float: right;
border-right-style: solid;
border-right-width: 1px;
border-right-color: #666666;

}


div.footer {
overflow: auto; /*to clear the floats*/
clear: both;
background: #f00; /*for demonstration only*/

}
.footer img {float:left;}
td {

padding: 0;
margin: 0;

}


table.topnav {

jihanemo
11-01-2009, 04:40 AM
Thank you for your help. The image map is just a jumbled, ugly mess of code anyway so I just removed it, separated each image into a cell, and laid a background image for that first cell that used to use an image map.

Excavator
11-01-2009, 05:35 AM
That looks good now. Much better than before.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum