Help with aligning 2 divs, background image and footer disappears!

[dwella]

Hi Im back doing some web design after a long hiatus.. I admit Ive forgot ALOT so please bare with me.
this is my problem:

Ive built a website and I want to align two divs next to each other. I managed to do that with float left and right. However, the footer gets pushed away somewhere and the background image for the content div (in which I have the 2 divs) disappears and so does the background image of the footer. Ive searched the web, watched tutorials on how to align two divs next to each other. people say you need to have a clear: both; etc, Ive tried it but it doesnt work.
If I put a clear: both; in the footer, the footer is fine, but the background image of the content div still disappears!

have a look here at how it looks:

www.marcuslew.com/Cru/index.html



right now my code looks like this:


#content {
background-image:url(../images/bg.jpg);
background-repeat:repeat-y;
width: 795px;
}

#leftContent {
width: 600px;
float: left;
background-color: green;
margin: 0px 0px 0px 7px;
}

#rightContent {
width: 181px;
float: right;
background-color: red;
margin: 0px 7px 0px 0px;

}

#footer {
background-image:url(../images/footer.jpg);
background-repeat:no-repeat;
height: 46px;
width: 795px;
border: none;
padding: 0px;
margin: -5px 0px 0px 0px;
clear: both;
}



Can someone please point out to me what im doing wrong here and how to correct it and how I can have my layout as I want it?
Thanks alot!

[Wickham]

You have put clear: both; in the footer style but that isn't enough to drag down the bg.jpg background in #content. You need a clear div inside the #content div after the floated divs because an u***oated div has a height and will tell the parent to carry down the background to cover it:-


<div id="rightContent">
<p>good bye good bye good byegood bye good bye good byegood

bye good bye good byegood bye good bye good bye</p>
</div>
<div class="clear">&nbsp;</div>
</div>

<div id="footer">


and this style:-


.clear { clear: both; width: 100%; height: 0; visibility: hidden; }


Your footer text is at the top of the footer. If you want to position it lower, don't add margin-top which will create a space above the footer, but add padding-top to footerText:-


.footerText {
text-align:center;
margin: 5px 0 0 0; padding-top: 8px;
}