Forum Moderators: not2easy
Am using a background image and floating a left column and main content div beside each other. all these are wrapped in a container. When I place the footer in its own container below these it gets placed just below the main content text.
Here is my style
html {
min-height: 100%;
margin-bottom: 1px;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #363C48;
background-image: url(../img/bg.gif);
background-repeat: repeat-y;
background-position: 50% 0;
font-size: 1em;
margin: 0;
padding: 0;
}
#wrapper {
width: 750px;
margin-left: auto;
margin-right: auto;
height: 100%;
}
#title {
background-image: url(../img/title.jpg);
background-position: 50% 0%;
width: 750px;
height: 152px;
margin-left: auto;
margin-right: auto;
}
#left {
width: 140px;
float: left;
margin-left: 5px;
margin-right: 5px;
color: #BBBBC1;
}
#main {
width: 580px;
float: right;
margin-left: 5px;
margin-right: 5px;
}
#footer {
width: 750px;
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: 0.7em;
font-variant: small-caps;
}
Any help would be appreciated - thanks
Try adding a "clear: both" line in the footer like I have.
<body>
<div id="wrapper">
wrapper
<div id="title">
title
</div>
<div id="left">
left
</div>
<div id="main">
main
</div>
<div style="clear: both;">
</div>
</div>
</div>
<div id="footer" style="border: .1em solid #000;">
footer
</div>
</body>
the clear: both; worked!
