what's wrong with my #footer? [Archive]

lixiao

08-03-2012, 08:13 AM

Dear all,

I want my footer to appear in the very bottom of the page but it doesn't (see, e.g. http://www.lixiao-art.com/broken.html). What's wrong with my #footer? :confused:

In my external css, I put:
------------------------------------
body { font-family: Verdana;
color: white;
margin: 0px;
background-color: black;
}

#header { font-family: courier new;
padding-left: 40px;
padding-top: 5px;
padding-bottom: 5px;
border: none;
background-color: white;
margin-bottom: 0px; }

#content {float: left;
padding: 30px 20px 20px 100px;
width: 650px;
margin: 0px;
border: none;
font: white;
font-family: Arial;
background-color: black; }

#content a {text-decoration:underline}

h2 {height: 2em;}

#nav {float: left;
text-align: right;
font-size: small;
width: 180px;
margin-top: 30px;
font-weight: bold;
padding: 10px;
border: none;
}

#footer { font-family: arial;
padding-bottom: 5px;
width: 100%
border: none;
background-color: black;
color: white;
margin-bottom: 0px;
}
a{text-decoration: none;
color: white;}
a:hover {color: red;}

* {margin: 0;}
html, body {height: 100%;}

.wrapper {min-height: 100%;
width: 1500px;
height: auto !important;
height: 100%;
margin: 0 auto -1.5em;}
.footer, .push { height: 1.5em; }
.ImgBorder img { border:1px solid transparent;
height:100px;
}
.ImgBorder:hover img{ border-color: red}

.ImgBorder {display: block;
float: left;
margin: 30px 20px; }
h5{
clear:both
}

img { border: none; }

-------------------------------------------------

In the body html, I put:
---------------------------
...........
<div class="push"></div>
<div class="footer">
<h6 style="color: white; text-align: center;">CONTENT</h6>
</div>
----------------------------

Please help! Thanks so much!!

Riku

08-03-2012, 10:21 AM

Here is your HTML code, I added two things marked underlined.

</div> is there to close the content div so your footer isnt inside of it

<div style="clear: both;"></div> is there to clear the floats that you got going with your images so they don't affect the footer.

you should do class named clearer and give it style "clear: both;" in CSS and use it instead so you can use the same class in other sites with same CSS file

example: <div class="clearer"></div>

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Li Xiao, artist | 李枭艺术家</title>
<meta http-equiv="content-type"
content="text/html;charset=gb2312" />
<meta name="keywords" lang="en"
content="Li Xiao, Li Xiao art, Chinese art, Sichuan Academy of Fine Arts, Sichuan artist, Hong Kong art, artist Li Xiao, terracotta warriors"/>
<meta name="keywords" lang="cn"
content="李枭" />

<link rel="stylesheet" type="text/css" href="css/global.css" />
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />

</head>
<body>
<div class="wrapper">

<div id="header">
<img src="/images/lixiao_name2.png" />
</div>

<div id="nav">
<p><a href="concept.html">Concept</a></p>
<p><br/><a href="broken.html">"Broken"</a></p>
<p><br/><a href="gaze.html">"Gaze"</a></p>
<p><br/><a href="past.html">Past</a></p>
<p><br/><a href="views.html">Views</a></p>
<p><br/><a href="exhibit.html">Exhibitions</a></p>
<p><br/><a href="me.html">About me</a></p>
<p><br><a href="contact.html">Contact</a></p>
</div>

<div id="content">
<h2>Paintings</h2>

<h4>"Broken"
<br/>
<br/><small>(click on images to enlarge)</small>
<br/>
<br/>
<a href="http://www.lixiao-art.com/work/latest/bliss/1.jpg" rel="lightbox[gaze]" class="ImgBorder"><img src="work/latest/bliss/1_t.jpg" /></a>
<a href="http://www.lixiao-art.com/work/latest/bliss/2.jpg" rel="lightbox[gaze]" class="ImgBorder"><img src="work/latest/bliss/2_t.jpg" /></a>
<a href="http://www.lixiao-art.com/work/latest/bliss/3.jpg" rel="lightbox[gaze]" class="ImgBorder"><img src="work/latest/bliss/3_t.jpg" /></a>
<a href="http://www.lixiao-art.com/work/latest/bliss/4.jpg" rel="lightbox[gaze]" class="ImgBorder"><img src="work/latest/bliss/4_t.jpg" /></a>
<a href="http://www.lixiao-art.com/work/latest/bliss/5.jpg" rel="lightbox[gaze]" class="ImgBorder"><img src="work/latest/bliss/5_t.jpg" /></a>
<a href="http://www.lixiao-art.com/work/latest/bliss/6.jpg" rel="lightbox[gaze]" class="ImgBorder"><img src="work/latest/bliss/6_t.jpg" /></a>
<a href="http://www.lixiao-art.com/work/latest/bliss/7.jpg" rel="lightbox[gaze]" class="ImgBorder"><img src="work/latest/bliss/7_t.jpg" /></a>
<a href="http://www.lixiao-art.com/work/latest/bliss/8.jpg" rel="lightbox[gaze]" class="ImgBorder"><img src="work/latest/bliss/8_t.jpg" /></a>
<a href="http://www.lixiao-art.com/work/latest/bliss/9.jpg" rel="lightbox[gaze]" class="ImgBorder"><img src="work/latest/bliss/9_t.jpg" /></a>
<a href="http://www.lixiao-art.com/work/latest/bliss/10.jpg" rel="lightbox[gaze]" class="ImgBorder"><img src="work/latest/bliss/10_t.jpg" /></a>
<a href="http://www.lixiao-art.com/work/latest/bliss/11.jpg" rel="lightbox[gaze]" class="ImgBorder"><img src="work/latest/bliss/11_t.jpg" /></a>
<a href="http://www.lixiao-art.com/work/latest/bliss/12.jpg" rel="lightbox[gaze]" class="ImgBorder"><img src="work/latest/bliss/12_t.jpg" /></a>
<a href="http://www.lixiao-art.com/work/latest/bliss/13.jpg" rel="lightbox[gaze]" class="ImgBorder"><img src="work/latest/bliss/13_t.jpg" /></a>
<a href="http://www.lixiao-art.com/work/latest/bliss/14.jpg" rel="lightbox[gaze]" class="ImgBorder"><img src="work/latest/bliss/14_t.jpg" /></a>
<a href="http://www.lixiao-art.com/work/latest/bliss/15.jpg" rel="lightbox[gaze]" class="ImgBorder"><img src="work/latest/bliss/15_t.jpg" /></a>
<br />
</div>

<div class="push"></div>

<div style="clear: both;"></div>
<div class="footer">
<h6 style="color: white; text-align: center;">Li Xiao's Studio 李枭工作室 © 2012 </h6>
</div>

</body>
</html>