# CSS: IE margin problems are making me want to slap bill gates!

**URL:** https://forum.kirupa.com/t/css-ie-margin-problems-are-making-me-want-to-slap-bill-gates/160342
**Category:** Uncategorized
**Created:** [August 25, 2005, 7:54am UTC](https://forum.kirupa.com/t/css-ie-margin-problems-are-making-me-want-to-slap-bill-gates/160342 "2005-08-25T07:54:33Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![GOLGO\_13](https://avatars.discourse-cdn.com/v4/letter/g/e47c2d/32.png) [@GOLGO\_13](https://forum.kirupa.com/u/GOLGO_13)
#### Post date: [August 25, 2005, 7:54am UTC](https://forum.kirupa.com/t/css-ie-margin-problems-are-making-me-want-to-slap-bill-gates/160342/1 "2005-08-25T07:54:33Z")

</div>

hello…  
i’ve got a two column CSS layout using a container/wrapper div that has a box model hack applied to it. the container is 770 pixels wide (750 + 10px paddings for compliant browsers)…

so, the header is automatically “indented” 10 pixels on each side by the padding in the container. \*\*great.

\*\*however, i want the two colums and the footer to be “indented” 20pixels on each side. so i tried to set the left margin of the **content** column to 10px… (10 + 10 = 20 )

but **IE indents it 20px!!** not 10… (10 + 20 = 30 )

FF treats it just fine… but **IE** …?? :{

i’m hoping somebody could tell me what sort of IE problem i’m dealing with, and suggest a workaround… i’ve spent the day trying to figure it out… :hurt::{:hurt::hurt::hurt::hurt::{

HELP!!  
**Why does IE indent it 20px when its only supposed to go 10px!!**

the code should be really easy to read through… i’ll post it in here, as well as attach a copy of it…

thanks!!

the CSS

```php

	<style media="all" type="text/css">

html, body { 
	margin: 0; 
	 padding: 0;
	font-family: helvetica, Tahoma, Verdana,Serif;
	}

#container {
	background-color:#FFCC00;
	 margin: 0 auto;
	 width: 750px;
	 padding: 0px 10px 0px 10px;
	background-repeat:no-repeat; 

	}

* html container { /* This is the "Tan hack" for IE */
				width: 770px;
				w\idth: 750px;
				}

#header {
	 background-color:#000000;
	 color:#FFFFFF;
	 padding: 20px;
/* margin:0px 0 0 0; */
	 margin: 0px;
	}

#artwork {
	 border: 1px solid black;
	 padding-top: 20px;
	 padding-bottom: 20px;
	 margin: 0px
	}

/* here's the left colum */
#content {
	background-color:#FF9900;
	margin: 0px 10px 0px 10px;
	
	
	float:left;
	width:487px;
	}

/* the "some info" box in the right column */
#sidebar {
	background-color:#FF9900;
	
	width: 230px;
	
	float: left;
	padding:0px;
	}

/* the "more info" box */
#sidebar2 {
	background-color:#FF9900;
	
	width: 230px;
	margin-top: 20px;
	float: left;
	padding:0px;
	}

#footer {
 margin: 20px 10px 0px 10px;
 padding: 0px;
 border: 1px solid black;
 clear: both;
}
	
	</style>

```

\*FYI, the “ **artwork** ” div is basicly a second **header** … after adding the “skin” to the site, the **artwork** and **header** divs will combine to form one visual element… and also note the back slash in the hack isnt showing in this post for some reason…  
\*

here’s the html:

```php

<div id="container">
	<div id="header"><h1> logo/nav</h1></div>

	<div id="artwork"><h1>artwork</h1></div>

	<div id="content">
		<h2>Main Content Area</h2>
		<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content

  </div>

	<div id="sidebar">
		<h2>Some Info</h2>
		<ul>
			<li><a href="#">link 1</a></li>
			<li><a href="#">link 2</a></li>
			<li><a href="#">link 3</a></li>
		 <li><a href="#">link 4</a></li>	 		
		</ul>
	</div>

	<div id="sidebar2">
		<h2>More Info</h2>
		<ul>
			<li><a href="#">link 1</a></li>
			<li><a href="#">link 2</a></li>
			<li><a href="#">link 3</a></li>
		 <li><a href="#">link 4</a></li>	 		
		</ul>
	</div>

	<div id="footer">
		<p>Notice that the rule for the footer has a margin of 0 pixels set 
		on the bottom and the body rule has 20 pixels of padding on the bottom. 
		This is because IE/Win does not show the bottom margin of this element. 
		I am not sure what bug this is specifically, but my work around is simple enough.</p>
	</div>

</div>

```