cant figure out what happened here

I am pretty new to CSS and have tried to use it as much as I can with a new site that I am working on. The results were looking pretty good last night and I thought I was almost done with the template. But somewhere I did something wrong and now the collumns dont align probally. Actually it looks right in Firefox but wrong in IE.

If somebody had a minute could they take a peak at it and see if they can see any problems that I may not be noticing. I basically want the right hand side back from the bottom to the right like it should be and how it is in FireFox.

http://www.canadiangis.com/beta/index.php

http://www.canadiangis.com/beta/cangis_style.css



thanks

 

CSS layout. Always trouble free

#right {width: 175px;
	float: left;
	padding: 5px 0 5px 0;
	background: #F5F5F5;
	height: 760px;
}

Code (markup):

Try changing the column width to a lower value -> width: 175px;
I see no reason why it would be wider in IE than Firefox, so I guess the main column is pushing it out of it's designed position.

 

okay, I will give that a try tonite when I get home, I tried an online validator and got no errors, and was rather confused on what had happened since it did work originally.

thanks

 

Sure, it may validate well but you also need to allow enough space for each column to fit in their place, otherwise you'll get the layout messy, even if the validator say's it's fine. It will only check for poor coding errors...

 

like mentioned above there are problems in the width of the conainers.There is an error of 8px
To solve the problem
Increase the width of "conatiner1" by 8px or more.

#container1 {width:830px;
	border-style: double;
	margin-left: auto;
	margin-right: auto;
background:#fff;
}

Code (markup):

OR Decrease the width of "content" by 8px

#content {width: 470px;
	float: left;
	padding: 5px 0 5px 0;
	background: #F5F5F5;
	height: 760px;
}

Code (markup):