I have just began creating a new wordpress theme. When I open the page in Firefox the divs look as desired but the body div is underneath the sidebar in internet explorer. I want the sidebar on the left and the body with the posts to the right, right next to it. The div's are wrapped around the sidebar and the other div called body is wrapped around the post. Why is it that in internet explorer it looks so much different. I have included the css for these two divs underneath.
the web site is http://www.chriscarvergraphics.com/blog
Your overall page width is 1024px. Your sidebar width is 224px + 20px padding = 244px. Your body width is 800px + 5px padding = 805px. 244px + 805px = 1049px. See the problem?
Take the padding off the divs and add it (better still, make it a margin) to the elements inside the divs.
Thank you for this info. it helps a lot. Not only in this case but also for future sites. Thank you very much for the resource for that site validation tool.
the web site is http://www.chriscarvergraphics.com/blog
#body {
background-image:url(/images/bb_body.png);
width: 800px;
float: none;
background-repeat: no-repeat;
margin-left: 224px;
padding-top: 50px;
padding-left: 5px;
height: 600px;
}
#sidebar {
float: left;
height: 568px;
width: 224px;
background-image:url(/images/bb_side.png);
margin-left: 5px;
padding-left: 20px;
font-family: Arial, Helvetica, sans-serif;
padding-top: 20px;
background-repeat: no-repeat;
}
by the way I am using a Mac. and the only way I was able to see the internet explorer version was to use limusapp.com to view it
body
container
sidebar /sidebar
main /main (this is where the posts should go)
/container
/body
which you have done, but with those you need to get the right widths for your container...
example:
container =1000px
sidebar = 200px
body = 800px
make sure your widths are correctly sized.
and overflow hidden is great to fix small problems like forced push down with IE.
also: position relative and floating helps also
Your sidebar width is 224px + 20px padding = 244px.
Your body width is 800px + 5px padding = 805px.
244px + 805px = 1049px.
See the problem?
Take the padding off the divs and add it (better still, make it a margin) to the elements inside the divs.
I also noticed that you were not floating the body div. Dump that enormous margin and float it left, up against the sidebar.
One more quick tip. If you validate your code as you go you can save yourself a lot of potential problems http://validator.w3.org/#validate_by_input