Floated Layout - Now Positioning Content

Hello all,

Paul O’B is going to vomit with rage :crazy: when he sees the type of question I’m asking, but I really think I’ve got the grassroots of the floated layout correct. This is the code I’m using for the 3-float column:

CSS:


#wrapAroundAll{
	width:1066px;
	margin:0 auto;
	overflow:hidden;
}/*this div's width is not correct. Will be changed later. */


#leftside{
	overflow:auto;
	float:left;
	background:url("leftsidehomepage.gif") no-repeat scroll 50% 5px transparent;
	height:700px;
	width:300px;
}
#middle{
	width:626px; 
	margin:0 auto;
}
#rightside{
    background:url("rightsidehomepage.gif") no-repeat scroll 50% 5px transparent;
    min-height:800px;
	margin-left:845px;
	width:300px;
	float:right;
    overflow:visible;
}

NOW, to place the images and text into their respective places like it was nicely nested up against the main panel. The good news is I see all the images and text on the screen, but it’s still all over the place (leftside is near its place, but rightside is down at the bottom-right of the screen, emailbox is near its spot.) Right now, I have removed all positioning from the code. What CSS properties should I use to move the images and text around?

I’ll go ahead and update my files at http://www.productreviewsbytyler.com so you can see the random whereabouts of the images.

I’ve discovered something! When previewing the HTML file on my local machine, the appearance is off. After uploading recent files, the live web version appears nicely! The emailbox is attached right where it should be and the side windows are vertically symmetrical. The only thing is that they’re just a bit wide of the main column. The windows need to be hugging a little closer inward.

Does anyone know why I’m seeing different results?

It’s not displaying properly, still- disregard this post.