CODEWITHSUNDEEP
htmlcssinternet-explorer
Ian McIntyre Silber
Ian McIntyre Silber

Reputation: 5663

Can't get div positioning correct in IE7

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!

Upvotes: 0

Views: 207

Answers (4)

Ryan Lynch
Ryan Lynch

Reputation: 7776

@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.

alt text http://i432.photobucket.com/albums/qq48/shiftypowers/source.png

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:

alt text http://i432.photobucket.com/albums/qq48/shiftypowers/validation.jpg

Upvotes: 0

Guffa
Guffa

Reputation: 700342

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.

Upvotes: 1

Aaike
Aaike

Reputation: 246

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_lesson/boxes.html

Upvotes: 0

dhorn
dhorn

Reputation: 685

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

Upvotes: 0

Related Questions