View Full Version : (100% - 10 pixels) height not working in IE

06-03-2007, 08:53 PM
My problem is I want a div to expand 100% of the height of the screen (no scrolling), with a little bit of padding. I have this working fine in every browser I could test in (Opera, Firefox, Safari), except IE6 by setting positioning to absolute and top and bottom to 3px. In IE, it doesn't expand correctly. I've also tried setting the height to be 100% with a padding, and putting another div in it, but of course that would work in IE quirksmode but not in anything using the w3c box model, as it would expand outside of the page.

Here is the code for what I have so far:

<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>100% height using absolute positioning</title>
<style type="text/css" media="screen">
html {
height: 100%;

body {
margin: 0px;
height: 100%;

#div1 {
background: green;
width: 200px; height: 100%;

#div2 {
background: skyblue;
width: 190px;
border: 2px solid black;
position: absolute; left: 3px; top: 3px; bottom: 3px;

<div id="div1">
<div id="div2">

Thanks in advance,

06-03-2007, 08:59 PM
You are going about this the wrong way. You should be using a background image to create the effect you are looking for. This article explains the technique. www.alistapart.com/articles/fauxcolumns

06-03-2007, 09:03 PM
There's actually going to be content in div2, it's not just an image.

Even if I did simply place an image there, I still can't figure out how to make a div that will hold the content be somewhat padded from the sides, because the height isn't fixed.

06-03-2007, 09:12 PM
I said background image. I think you should read that link I gave you. As to the content you kind of answered your own question there. You use padding to move content from the sides of a parent element. Just remember padding counts for overall width. And why we are at it I recommend adding a doctype to your page. After doing so your previous code won't work in the first place. Without a doctype though you'll be struggling with IE display issues and will most likely be back in the near future. I recommend this doctype

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Read the sticky at the top of this forum to find out more about doctypes.

06-03-2007, 09:34 PM
I did read the link you gave me, but it's not quite want I'm aiming for.

There is a div on the left, with about 100px of text boxes, etc. on the bottom. The rest of the div is filled with a large list of items, likely overflowing with a scrollbar. The right side of the page displays information on a clicked item (that part will be handled on the server, the clicking etc. will be handled with some javascript).

The div on the left really does need to scale to the window height. I just can't get it to work in IE. The code I posted here is just a test that I've been attempting to get to work in IE.

Hopefully this will clarify my problem. (Although maybe I'm just not reading your answer right)