View Full Version : Resolved IE and min-height

01-11-2010, 08:45 AM
Hi all!

Ok, I've finally reached my limit. I just can't figure this out. I know that IE has all kinds of problems with CSS, but for the life of me, can't understand this one. I am testing this on IE8 and the min/max-height and widths work just fine for my wrapper div. The problem lies in that ap divs contained inside of this wrapper change position when the browser window is resized and the min-height is reached. This seems to only happen when I use the bottom property to position the inner div. Of course everything works fine in FF. I've included some simple code to show what I mean, because explaining this seems more difficult than I thought it would be.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body {
background-color: #000000;
html {height: 100%;}
#Layer1 {
border: solid green;
#Layer2 {
right: 100px;
overflow: visible;
border: solid blue;

<div id="Layer1">
<div id="Layer2"></div>


If you resize the browser smaller than the min-height of the green box, then the red box changes position. Any help is greatly appreciated!

01-11-2010, 09:55 AM

It looks like IE takes the height as reference for the absolute position instead of the min-height.

I had a look at your code searching if something could be a reason for IE to get lost and I saw the overflow:hidden. That seams to be IE's problem. If you remove it, it acts correctly. Do you really need the overflow here ?

01-11-2010, 12:42 PM
Wow, thanks! I've been pulling my hair out for hours with this and that works perfectly. Well except for not being able to hide my overflow. I might just place a big black empty div below the wrapper to hide any graphical overflow. Unless someone could suggest a better way. There will be several divs inside and some will be larger than the wrapper. They are part of a graphical fluid layout frame that contains the content. Again, thank you so much!:D

01-11-2010, 02:40 PM
Well, adding that div at the bottom to hide my overflow is causing scrollbars on the body and that's exactly what this design is supposed to avoid unless the window size is too small to display the contents in a readable way. Any other thoughts on a workaround for the overflow:hidden bug?

01-11-2010, 02:56 PM
Ok, I got it! It requires wrapping the wrapper in a wrapper...lol In other words, I put the whole thing inside of another div which has overflow:hidden while omitting it from the normal wrapper. Aside from sloppier looking code, everything now works as intended. Thanks again for the help!