Got a very weird problem

[Asim]

So I got this problem that I was unable to tackle now for days. Basially here is is:There is a main Body tag, inside the main body tag are three more div tags namedBodyLeftBodyMiddleBodyRightHere is the CSS Code for this:

#wrapper #body {height:350px;	width: 1000px;	}/* LEFT SIDE WRITTENT CONTENT*/#wrapper #bodyleft {	width: 250px;	height:350px;	float: left;		}#wrapper #bodymiddle{	width:500px;	margin:auto;	height:350px;}/* RIGHT SIDE WRITTENT CONTENT, E.G. LOGIN FORM MAY GO HERE*/#wrapper #bodyright {	width: 250px;	height: 350px;	float: right;	background-color: #008000;	top: -347px;	position: relative;}

OK as you can see you can align body tags easily by float: left or right that's what I do but when I insert the middle body tag the right tag drops down meaning I have to put the code for position and top spacing.OK I am usually fine with that but can someone explain why that happens.Now my main problem is this one, once I have aligned the body tag (the right one) the footer does not displayer properly now there is a main footer and then 3 more footer tags inside that one called.FooterLeftFooterMiddleFooterRightThe code for this is:

#wrapper #footer {	width: 1000px;	height: 138px;	background-color: #E0E0E0;}#wrapper #footerleft{	height:110px;	float:left;	width:333px;}#wrapper #footermiddle{	height: 110px;	width: 320px;	margin:auto;}#wrapper #footerright{	height: 110px;	float: right;	width: 333px;	top: -110px;	position: relative;}

OK same this happens here when the middle tag is inserted the right tag will drop down, and I have to use same method as above, but the weird problem is that, when I view in browser the right side tag, just does not display properly and overlaps the middle tag....Why is this happening?Btw I did use Margain-Left and Right and set it to auto but same thing happensHope someone understand and can helpThanks

[Ingolme]

Floated elements will only float relative to content that follows it, not the content that precedes it. If you want a left and right column, you'll need them placed both before the body.

<div id="left">Float left</div><div id="right">Float right</div><div id="main">Apply margins to the left and right of this element</div>