My div is sinking in IE

April 27, 2007 9:19 AM

CSS: This should be simple, but I, the super-novice, can't find the answer. I need to figure out how to get my float:right column to sit next to my float:left column, instead of it sitting to the right, but below the left... in IE of course.

I "designed" my little site using Firefox to view it throughout the process. I didn't realize that IE doesn't deal with floats the same way... until I was finished. But I think my layout is pretty simple and I'm hoping the solution is too.

I have a wrapper div with two columns inside it... that's it. In Firefox it's nice and pretty and works as logically as my code assumes. In IE, the right column floats to the right within the wrapper div, but it sits below the bottom of the left column.

Isn't there some simple workaround for IE to pop that right column back up where it's supposed to be? I have done quite a few searches on the topic and found all sorts of stuff, which I try to apply, but nothing seems to do it.

posted by Witty to computers & internet (26 comments total)

Here's my CSS for the body, the wrapper div and the two divs inside the wrapper (content and thumbs).

body {
background-color: #666666;
background-image: url(bg.gif);
background-attachment: fixed;
background-repeat: repeat-y;
margin: 0px;
padding: 0px;
min-width: 800px;
}

#wrapper {
background-image: url(newlogo.gif);
background-attachment: fixed;
background-repeat: no-repeat;
background-color: transparent;
position: absolute;
margin: 0px auto;
width: 800px;
}

#content {
background-color: #666666;
display: inline; /* fixes part of the ugliness in IE */
float:left;
width: 635px;
min-height: 535px;
margin: 0px 0px 0px 53px;
}

#thumbs {
background-color: #666666;
float: right;
width: 112px;
margin: 60px 0px 0px 0px;
}
posted by Witty at 9:21 AM on April 27, 2007

You have a 60px top margin for #thumbs. Isn't that what's pushing down the thumbs column?
posted by FreezBoy at 9:25 AM on April 27, 2007

Well, not in Firefox. The #thumbs div is just that, a vertical strip of thumbnails... .which I pushed down a bit (in Firefox) to line up with elements in the content div to its left. Even when I remove that margin, the problem is still there... just 60px higher than before. :)
posted by Witty at 9:33 AM on April 27, 2007

I've run into this before where reversing the order of the divs in the HTML fixed it.
posted by bitdamaged at 9:37 AM on April 27, 2007

Have you tried putting "clear:none;" on the thumbs div?
posted by cerebus19 at 9:42 AM on April 27, 2007

Each image represents my wrapper div. The first image is what I get (and what I want) in Firefox. The second is what I get in IE.




posted by Witty at 9:43 AM on April 27, 2007

you don't need a float:right column if all you have is two columns. you are probably suffering from some kind of width anomaly. as is evident in the fact that you combine the widths of your two inner "columns" and then the 53px left margin on #content - and that's over 800px, the overallwidth of your wrapper.

you can email me about this if you want.
posted by phaedon at 9:44 AM on April 27, 2007

... which is causing your inner columns to stagger, i meant to finish with.
posted by phaedon at 9:45 AM on April 27, 2007

oops... guess no img tags in AskMe?

cerebus19 - Yes, no dice. I know puzzles like this are difficult/annoying without having access to all of the code.
posted by Witty at 9:45 AM on April 27, 2007

Ahh, ok. It makes it hard not seeing your HTML as well.
Another thing to try - give the floats some breathing room and either reduce your 53px left margin in #content, or reduce the widths slightly.

Or what Phaedon said.
posted by FreezBoy at 9:46 AM on April 27, 2007

I'm not sure if I understand the problem. The CSS you posted displays properly for me in both Firefox and IE, with the exception that IE ignores your min-height declarations.

Maybe you could also post a shortened version of your HTML?
posted by Hildago at 9:46 AM on April 27, 2007

In Firefox - click

In IE - click
posted by Witty at 9:49 AM on April 27, 2007

No IMG tags in all of MeFi. But you could link to the images.
posted by cerebus19 at 9:49 AM on April 27, 2007

...as you just did. Pay me no mind.
posted by cerebus19 at 9:49 AM on April 27, 2007

Works for me also. Not sure what the problem is - when you remove the 60px top margin in #thumbs they line up as they should. In all browsers.
posted by eightball at 9:51 AM on April 27, 2007

And FWIW, if you get fed up, there are always templates for these kinds of layouts [1,2]
posted by Hildago at 9:52 AM on April 27, 2007

I suggest you remove the margin from content. It really oughtn't to be necessary, anyway, since the float:right on the thumbs div should cause it to right-align anyhow.
posted by cerebus19 at 9:52 AM on April 27, 2007

The margin-right of 53px is to allow the background-image newlogo.gif of the wrapper div to show through.
posted by Witty at 9:53 AM on April 27, 2007

You could try adding overflow statements: Article: Fixing the PC IE "float drop" bug. This has worked for me before.
posted by chicgeek at 9:55 AM on April 27, 2007

dude. get rid of the float: right.

or if you're going to use the float:right, make sure your FIRST div listed in the html is using the float: right, and your second uses the float:left. get what im saying?
posted by phaedon at 10:02 AM on April 27, 2007

also, regardless of "what you're using the margin-LEFT" for, you should increases the size of the #wrapper to width: 850px and see if you still have this problem.
posted by phaedon at 10:04 AM on April 27, 2007

I had the same problem with a Blogger blog.
After this (carats removed)
div id="main"
I put this:
div style="float:right;margin-left:10px;margin-top:0px;margin-bottom:10px;"

I thought I had already specified all that in the head, but whatever. I have absolutely no idea whatsoever (at all, even a little bit) why -- I was just guessing and trying -- but it did fix the problem. The page looked the same in Firefox, and it was fixed in IE.

Maybe this will help those who do know CSS to diagnose the problem.
posted by Methylviolet at 10:10 AM on April 27, 2007

BANG!

phaedon, well done... and thank you. Giving the wrapper div a little more "breathing room", to use FreezBoy's words, and changing the order of the column divs fixed the problem. Awesome.
posted by Witty at 10:24 AM on April 27, 2007

offhand I'd agree with phaedon. IE always seems to bitch up margin (which should be relative anyways, meaning it's added to the width of your child divs), and padding and such. Kill the width on the container div and see if it fixes it -- then tweak it until it's the right width.

honestly though? layout with CSS is cool, but floats are difficult to manage. We usually end up putting everything in tables for major column layouts. it's not as cool, but when you don't have ages to work out browser quirks it "Just Works". Which honestly, is enough for most people, unless they're trying to win a standards contest (sorry Zeldman, Nielsen, etc).
posted by fishfucker at 10:27 AM on April 27, 2007 [1 favorite]

Clearing Floats Without Structural Markup

Clearing Floats: The FNE Method
posted by kirkaracha at 10:49 AM on April 27, 2007

cheers! also, this how-to may qualify as ancient, but hey, what when it works, it works.

glish.com/css
posted by phaedon at 12:00 PM on April 27, 2007