CSS fix for centering web page - Internet Explorer 6 plus - not displaying correctly

Hi, I have just recently made the transition to css from tables on the main page of my website. This is the beginning of an attempt to re-vamp my entire site.

In most popular versions of Internet Explorer such as version 6 plus, it is not centered properly.

I am also having problems with the columns in IE. There is significant space between the center column and the right column that I do not know how to get rid of for Internet Explorer. I have tried playing with the margins and padding, but to no avail. It displays fine in firefox and safari I believe- but in IE as there is significant space created that I do not know how to get rid of. Can anybody give me the code?

I can maybe solve the first issue by using a <div align="center"> for the entire website, but I do not think that is good practice or coding. Is there a way to do this in CSS that will sort this out for IE? And how to get rid of that crazy space?

I would be grateful for any help and advice. My page is http://www.anxietymadewell.com/

 

align could be used to align the content of an element (such as <div align="center">Stuff</div>), but, like the center tag, the CSS text-align property is the new boss.

you can use "text-align:center" to the body tag. This will center the layout in IE

body{
text-align:center;
}

As per me, i avoid using % or mix of % and specific width rather i specify width for 3 columns div to avoid cross-browser issues.

currently the div#aside is being float to the right of the parent div, which is causing the gap between center div and right side div. My suggestion would be place these div relative to each other and float to their left.
for example:

#section-navigation {
position:relative;
top:0;
left:0;
float:left;
margin:0 10px;
width:240px;
}
#center{
position:relative;
top:0;
left:0;
float:left;
margin:0 10px;
width:520px;
}
#aside{
position:relative;
top:0;
left:0;
float:left;
margin:0 10px;
width:240px;
}

Hope you resolve your issues soon.

 

Hi, you managed to identify and help resolve the problem. Thank you for your help! I have now managed to resolve the problem- but probably in a very messy way with a lot of messing around- as I kept the padding in and now the width of the 3 columns adds up to 871px instead of 1000px But it seems to work. Maybe would have worked better if I followed your exact example without the padding and messing around with pixels left, right and center! Maybe I will use your template example for my internal pages and see how that goes.

Thank you again!

 

that great. Maybe you can have a look around http://www.htmldog.com/; has some useful info.

 

brother, I suggest you to use css framework, I use 960.gs, css framework not only make your fast to code css, but they also give you a lot of feature, including centering web page ( also compatible multi web browser )