Can't get div positioning correct in IE7

Question

I can't for the live of me figure out how to get one element in my layout to be placed properly in IE 7. You can see the page here:

http://www.iancreates.com/debbie/contact/

Works fine in Firefox, but if you look in IE 7, you'll see the sidebar is beneath the body content. I've tried everything I could think of (floating both divs, changing width and margin/padding to account for IE box model) but to no avail.

Here's the relevant CSS:

.content-left {
width:670px;
height:auto;
margin:0 30px 0 10px;
padding:0;
float:left;
}


.content-right {
width:240px;
height:auto;
margin:0;
padding:0;
float:left;
}

I appreciate the help!

Answer 1

Posting the CSS code would be helpful. Try using "position".

Answer 2

one thing you could do is set your peace-main to float 'left' and only have a width of 700px (so there is enough room for the sidebar)

then the sidebar should also have it's float set to 'right'

but i would actually suggest you try one of these methods : http://www.thenoodleincident.com/tutorials/box%5Flesson/boxes.html

Answer 3

This is a classic IE problem, combined with a slightly impractical page layout.

You have set your peace-main div to have the width 100%, so there is no room for the right content beside it. In standards compliant browsers however, the div doesn't have any height (as it only contains floating elements), so it's not a problem that the right content ends up below it. In IE7 the div is expanded to contain it's content, i.e. the left content div, so it gets a height, and as the right content goes below it, it ends up below the left content also.

Just remove width: 100%; from the peace-main style.

Answer 4

@Guffa's answer is correct in my estimation. I think that your page may have validation errors also that are causing it to be parsed incorrectly. Looking at your markup, it looks like you had wanted div.content-right and div.content-left to be in the same container div, however they aren't, leading the the problem as @Guffa pointed out.

If they were in the same container however, as I think you intended, then this problem would be solved as well. Try and fix this extra div closing tag, see what that does: