Float/Margin Error with IE

[Shadows]

Hi guys, I'm in the process of learning css however upon adopting the approach of using div tags instead of tables, I'm having trouble with one column. I'm using a traditional design with left, mid and right column.Its the middle column thats giving me a problem. To make the containers, I am using the following css code.

#leftcol {	float: left;	margin: 10px 0 0 10px;	width: 20%;	height: 150px;	border-top: 1px solid #393939;	border-left: 1px solid #393939;	border-right: 1px solid #393939;	border-bottom: 1px solid #393939;	padding:}#midcol {	float: none;	margin: 10px auto 0 auto;	width: 54%;	height: 150px;	border-top: 1px solid #393939;	border-left: 1px solid #393939;	border-right: 1px solid #393939;	border-bottom: 1px solid #393939;}#rightcol {	float: right;	margin: -152px 10px 0 0;	width: 20%;	height: 150px;	border-top: 1px solid #393939;	border-left: 1px solid #393939;	border-right: 1px solid #393939;	border-bottom: 1px solid #393939;}

It displays perfectly in ff and opera however IE doesnt render it correctly. I've done alot of searching and found something very similar such as using display: inline; however this completely breaks the display.Below is a screenshot of the containers in Ie, can anyone help or give a suggestion?http://www.wjdev.net/table.gif<<removed tags because of image stretching the screen. Click the link to see the screenshot.>>

Edited October 4, 2006 by Jonas

[BiteMe]

Hellotry changing, the margin on the mid colmargin: 10px 0 0 250px;

[Err]

Try and make all your floats "left".

#leftcol, #midcol, #rightcol {  float: left;  border: 1px solid #393939;  height: 150px;}#leftcol {	margin: 10px 0 0 10px;	width: 20%;}#midcol {	margin: 10px auto 0 auto;	width: 54%;}#rightcol {	margin: -152px 10px 0 0;	width: 20%;}

I have not tested that, try it and see if it works. You might need to adjust your margins and/or widths a little.

[Shadows]

ok thanks, I got it working but now I have a new problem, I want to make tables in each column using css but heres my result.As you can see, I want the blocks seated underneath each other in their respective column.

<div id="leftcol">			<div id="sidecontainer">	<span class="title">Site Nav</span>		<div id="line"></div>			-- <a href="/home" title="Home">Home</a><br />			-- <a href="/faq" title="FAQ">FAQ</a><br />			-- <a href="/about" title="Contact">About</a><br />			-- <a href="/contact" title="Contact">Contact</a><br />			-- <a href="/linkus" title="Link to us">Link Us</a><br />			-- <a href="/topsites" title="Top Sites">Top Sites</a><br />			-- <a href="/stats" title="Stats">Statistics</a><br />			-- <a href="/webmasters" title="Web Masters">Web Masters</a><br />			-- <a href="/users_list" title="Members List">Members List</a><br />			-- <a href="/b_affiliate" title="Voting Booth">Become Affiliate</a><br />		</div>	</div>				<div id="sidecontainer">	<span class="title">Second Left Block</span>		<div id="line"></div>			Under first block		</div>	</div>			</div>

Here is the code I'm using for the sidecontainer

#sidecontainer {	padding: 3px;	border-bottom: 1px solid #C0C0C0;	border-top: 1px solid #C0C0C0;	border-left: 1px solid #C0C0C0;	border-right: 1px solid #C0C0C0;	background-color: #F2F2F2;}