I'm sure it is to do with the positioning but I cannot resolve the issue. Body and footer comes on top of each other at the end of the page. How can I make body liquid so it doesn't overlap with footer?
Thanks
JSFIDDLE is here.
CSS
*
{
margin: 0px;
padding: 0px;
}
div
{
display: block;
}
/* --- BODY ------------------------------------------------ */
#body_block
{
float: left;
width: 100%;
background: #EEEEEE;
/*background-image: url('../images/bg3.jpg');*/
}
#body
{
margin: 0 auto;
position: relative;
width: 900px;
/*background: #BB0099;*/
}
#body_title
{
position: absolute;
top: 15px;
left: 0px;
width: 200px;
/*height: 24px;*/
background: #aa99ff;
}
#body_search
{
position: absolute;
top: 15px;
right: 0px;
width: 200px;
/*height: 24px;*/
background: #aa99ff;
}
#body_content
{
position: relative;
top: 50px;
left: 0px;
width: 900px;
/*height: 24px;*/
background: #aa99ff;
}
/* --- FOOTER ---------------------------------------------- */
#footer_block
{
float: left;
width: 100%;
/*background: #DDDDDD;*/
}
#footer
{
margin: 0 auto;
position: relative;
width: 900px;
padding: 15px 0px 15px 0px;
/*background: #CC0011;*/
}
HTML
<body>
<div id="body_block">
<div id="body">
<div id="body_title"><h1>Home</h1></div>
<div id="body_search"><h1>Search</h1></div>
<div id="body_content">
TOP<br /><br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br /><br />BOTTOM
</div>
</div>
</div>
<div id="footer_block">
<div id="footer">FOOTER</div>
</div>
</body>
As @DavidMillar said, clearing the floats on the footer will solve the overlap problem. However, I suspect that you can achieve the design you want a lot more straightforwardly by using some of the design elements as intended.
* {
margin: 0px;
padding: 0px;
}
#body {
background: #EEEEEE;
margin: 0 auto;
position: relative;
width: 900px;
/*background: #BB0099;*/
}
#body_title {
float: left;
width: 200px;
/*height: 24px;*/
background: #1199ff;
}
#body_search {
float: right;
width: 200px;
/*height: 24px;*/
background: #aa11ee;
}
#body_content {
clear: both;
width: 900px;
/*height: 24px;*/
background: #aa99ff;
}
#footer {
width: 900px;
padding: 15px 0px 15px 0px;
background: #CC0011;
}
To summarize:
divs are block by default, no need to specify* will apply it all elements: No need to reapply individually.#body_title and #body_search can be floated left/right to keep them where you want them.#body_content so it goes back into document flowposition: relative unless you plan on moving the elements around. As now everything is in document flow (except two floats at top) no need to position them.I also removed the wrappers from the body and footer because I felt they were unnecessary, but you can easily add them back in. :)
Check out the new fiddle: http://jsfiddle.net/dR82X/
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments