How can I put a floating div to the bottom of the page?
I have a web page with a "header", a content with two columns and a "footer". The content left column or "contentinfo" has variable size because it depends on the information loaded. The right column or "sidebar" has two different divs in it, one with a "menu" and other with "credits".
Something like:
<div id="header"></div>
<div id="contentinfo" style="float:left;"></div>
<div id="sidebar" style="float:right;">
<div id="menu"></div>
<div id="credits"></div>
</div>
<div id="footer" style="clear:both;">
You can see a sketch: (The "sidebar" is just a container div)
What I want is to put the &quo开发者_如何学Ct;credits" div aligned at the bottom of the "contentinfo" div. And let the space between the "Menu" div and the "credits" div empty. Something like:
I have tried to set position:relative; in the "sidebar" and position:absolute; bottom:0px; in the "credits". The problem is that I can't set an specific height to the "sidebar" because I don't know the height of the "contentinfo". However, in a trial, I've set the side bar height to a high enough value and the code didn't work.
I would appreciate any help.
¡I made it! It is a bit amateurish but it works:
I put the "credits" under the "footer" with a height:100px; and a position:absolute; top:-100px;
In the side bar i added a "slot" empty div with height:100px. In that way I avoid collisions.
You can see it in http://blog.tomtucker.cz.cc
The HTML:
<!DOCTYPE html>
<head>
</head>
<body>
<div id="header">Header</div>
<div id="contentinfo" style="float:left;">Content</div>
<div id="sidebar" style="float:right;">
<div id="menu">Menu</div>
<div id="slot" style="height:100px">Slot</div>
<!-- With that I avoid overlapping with the credits -->
</div>
<div id="footer" style="clear:both; position:relative;">Footer
<div id="credits">Credits</div>
</div>
</body>
</html>
The CSS:
body {
width:600px;
}
#header {
background-color:#F00;
height:30px;
width:600px;
}
#contentinfo {
background-color:#CCC;
height:600px; /* Any you want*/
width:500px;
float:left;
}
#sidebar {
width:100px;
float:right;
}
#menu {
background-color:#00F;
width:100%;
height:70px;
}
#slot {
background-color:#0F0;
width:!00%;
height:100px; /* The same as the credits div */
}
#footer {
background-color:#FF0;
position:relative;
clear:both;
height:30px;
width:600px;
}
#credits {
background-color:#609;
position:absolute;
height:100px;
width:100px;
top:-100px;
left:500px;
}
加载中,请稍侯......
精彩评论