Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    (100% - 10 pixels) height not working in IE

    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:

    Code:
    <html>
    <head>
    	<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;
    		}
    	</style>
    </head>
    
    <body>
    <div id="div1">
    	<div id="div2">
    	</div>
    </div>
    </body>
    </html>
    Thanks in advance,
    —Korolen

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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
    Code:
    <!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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •