ok well i was starting a new project... I started outlining the template but something started happening thats never happened to me before...

1.My container isn't centered in IE.

2. when adding a padding to the content div. it expands the box in firefox.. in ie it just word wraps.

This is what I have so far.. How do I fix this?

html,body {
margin: 0px;
padding: 0px;
}

body {
font-family: Helvetica, Arial, Verdana, sans-serif;
background-color: green;
}

#container {
width: 800px;
margin: auto;
background-color: green;
}

#header {
width: 800px;
height: 100px;
background: url(pic.png) no-repeat left;
background-color: white;
}

#navigation {
width: 800px;
height: 35px;
background-color: purple;
}
#content {
width: 800px;
padding: 15px;
background-color: pink;
}

#footer {
width: 800px;
height: 35px;
text-align: center;
background-color: maroon;
}

To center your container in IE, you could try adding:



to body.

When you add padding to unit which has width set, it should expand. Firefox is correct in expanding, IE is not.
You should change your width to fix this problem.