|
alpi -> Footer problem (10/27/2005 18:19:56)
|
Hi everybody!
This is my first post here, I hope some1 can help me with this "long time" problem I have...
First of all, let's loot at the code:
quote:
<html>
<head>
<link href="prova.css" rel="stylesheet">
<title>Prova</title>
</head>
<BODY>
<div id="testa1">
</div>
<div id="testa2">
</div>
<div id="testa3">
</div>
<div id="left"><div id="right">
<div id="col-sx">
</div>
<div id="col-cen">
<div id="table">
</div>
</div>
<div id="col-dx">
</div>
</div></div>
<div id="footer1">
</div>
<div id="footer2">
</div>
</BODY>
</html>
and the css:
quote:
body {
margin: 0;
padding: 0;
height: 100%;
}
#left {
float: left;
width: 100%;
background: url(../images/menu_sx.bmp) left top repeat-y;/*image H: 1px, W: 160px.*/
}
#right {
float: left;
width: 100%;
background: url(../images/menu_dx.bmp) right top repeat-y; /*same here*/
}
#testa1 {
width: 100%;
height: 100px;
background: blue;
}
#testa2 {
width: 100%;
height: 50px;
background: green;
}
#testa3 {
width: 100%;
height: 20px;
background: yellow;
}
#table {
position: relative;
left: -3px;
width: 50px;
height: 340px;
background: gray;
}
#col-sx {
float: left;
width: 160px;
}
#col-dx {
float: right;
width: 160px;
}
#col-cen {
margin: 0px 160px;
background: black;
}
#footer1 {
position: absolute;
bottom: 50px;
height: 20px;
width: 100%;
background: lime;
clear: left;
}
#footer2 {
position: absolute;
bottom: 0px;
height: 50px;
width: 100%;
background: aqua;
clear: left;
}
Well, if you try this one, you will see that the footer goes over the content (div "table") if the page is too small in height.
OC, I want the footer to be on the bottom of the page, but not to cover the content.
How can I solve this problem?
I really hope I can get help, I've been working on this issue for several days to complete an university project...
Thanks in advance.
ALAN
|
|
|
|
