My div is sinking in IE
April 27, 2007 9:19 AM Subscribe
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.
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.
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
posted by FreezBoy at 9:25 AM on April 27, 2007
Response by poster: 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
posted by Witty at 9:33 AM on April 27, 2007
Best answer: 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
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
posted by cerebus19 at 9:42 AM on April 27, 2007
Response by poster: 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
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
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
posted by phaedon at 9:45 AM on April 27, 2007
Response by poster: 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
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
Best answer: 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
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
Maybe you could also post a shortened version of your HTML?
posted by Hildago at 9:46 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
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
posted by eightball at 9:51 AM on April 27, 2007
Best answer: 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
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
posted by cerebus19 at 9:52 AM on April 27, 2007
Response by poster: 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
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
posted by chicgeek at 9:55 AM on April 27, 2007
Best answer: 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
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
Best answer: 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
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
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
Response by poster: 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
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]
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
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
glish.com/css
posted by phaedon at 12:00 PM on April 27, 2007
This thread is closed to new comments.
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