div not taking up all available space in IE

**TimH** · Aug 24, 2004 14:34

Hi everyone,

I am having trouble to make a div take up the remaining space between two other divs. I have it working for Mozilla, but IE is giving me headaches. I can make it take up more, by using

height/width=100%;

but this means 100% of the width/height of the body tag, thus the total layout goes off the page in both IE and Mozilla :-(

Does anybody have an idea how I can fix this? Here's the code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 <?xml version="1.0" encoding="UTF-8"?>
 
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl">
 
 <head>
 
 <style type="text/css">
 body {
  margin: 0;
  padding: 0;
  height: 100%;}
 
 #ctr {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 5px solid pink;}
 
 #cbr {
  position: fixed;
  right: 0;
  top: 0;
  width: 40px;
  padding: 0;
  height: 50px;
  border: 5px solid magenta;}
 
 #top {
  position: fixed;
  left: 0;
  top: 0;
  right: 40px;
  padding: 0;
  height: 50px;
  border: 5px solid red;}
 
 .content {
  position: relative;
  top: 70px;
  margin: 0 50px 50px 10px;
  padding:0 10px;
  border: 5px solid green;}
 
 #right {
  position: fixed;
  right: 0;
  top: 50px;
  bottom: 40px;
  padding: 0;
  width: 40px;
  border: 5px solid blue;}
  
 #bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 40px;
  height: 40px;
  border: 5px solid purple;}
 
 * html body #ctr, 
   * html body #cbr,
 	* html body #top,
 	* html body #right,
 	* html body #bottom {position: absolute;}
 </style>
 
 </head>
 
 
 <body>
 
 <div id="ctr">img</div>
 
 <div id="cbr">img</div>
 
 <div id="top">The header frame</div>
 
 <div id="right">some<br />img<br />here</div>
 
 <div class="content">Thanks a lot for all the help!</div>
 
 <div id="bottom">some images here as well</div>
 
 </body>
 </html>

Any help would be greatly appreciated!

Cheers,
Tim

**Paul O'B** · Aug 25, 2004 10:28

Hi,

I think what you are trying is not easily achiveable without completely separaet code and even then its is still difficult.

Heres an example using separate code for mozilla and ie. Note that ie must be in quirks mode for this to work which is why the xml prologue is used to force quirks mode.

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!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">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- force quirks mode with the xml prolgoue -->
<style type="text/css">
/* ie only styles */
* html body {
margin:60px 50px 50px 0;
padding: 0;
height: 100%;
overflow:hidden;
}
 
* html #ctr {
position: absolute;
bottom: 0;
right:0;
width: 50px;
height: 50px;
padding: 0;
border: 5px solid pink;}
 
* html #cbr {
position: absolute;
right: 0;
top: 0;
width: 50px;
padding: 0;
height: 60px;
border: 5px solid magenta;}
 
* html #top {
position: absolute;
left: 0;
top: 0;
width:100%;
padding: 0;
height: 60px;
border: 5px solid red;}
 
* html .content {
margin-left:10px;
margin-right:10px;
padding:0 10px;
border: 5px solid green;
overflow:auto;
height:100%;
}
 
* html #right {
float:right;
height:100%;
width: 50px;
border: 5px solid blue;
overflow:auto;
position:relative;
margin-right:-50px;
display:inline;
}
 
* html #bottom {
position: absolute;
bottom: 0;
left: 0;
width:100%;
height: 50px;
border: 5px solid purple;
}
/* mozilla styles below */
html>body {
margin: 0;
padding: 0;
height: 100%;}
 
html>body #ctr {
position: fixed;
bottom: 0;
right: 0;
width: 40px;
height: 40px;
padding: 0;
border: 5px solid #FFCCCC;}
 
html>body #cbr {
position: fixed;
right: 0;
top: 0;
width: 40px;
padding: 0;
height: 50px;
border: 5px solid #FF00FF;}
 
html>body #top {
position: fixed;
left: 0;
top: 0;
right: 50px;
padding: 0;
height: 50px;
border: 5px solid red;}
 
html>body .content {
position: fixed;
top: 70px;
right:60px;
left:10px;
bottom:60px;
padding:0 10px;
border: 5px solid green;
overflow:auto;
}
 
html>body #right {
position: fixed;
right: 0;
top: 60px;
bottom: 50px;
padding: 0;
width: 40px;
border: 5px solid blue;}
 
html>body #bottom {
position: fixed;
bottom: 0;
left: 0;
right: 50px;
height: 40px;
border: 5px solid purple;}
</style>
</head>
<body>
<div id="ctr">ctr</div>
<div id="cbr">cbr</div>
<div id="top">The topheader frame</div>
<div id="right">right<br />
img<br />
here</div>
<div class="content"> 
<p>Thanks a lot for all the help</p>
</div>
<div id="bottom">bottom images here as well</div>
</body>
</html>

I can't guarantee how this code will stand up but it may be of some use in your quest

Paul

**TimH** · Aug 25, 2004 14:21

Hi Paul,

thanks for the advice, again!

Since I'm leaving on vacation for a week and a basic version of the site should be on line asap, I thought of looking into this later on and doing it quick and dirty with tables. Now even those are giving me headaches. I'm losing it :-)

Thanks a lot for the help.

Cheers,
Tim

**Paul O'B** · Aug 25, 2004 14:29

Yes I thing even tables will struggle with the concept you have

.

Mozilla is straightforward with css because it allows you to set a position using top,left,right and bottom. Ie won't recognise this which is what causes most of the problems.

In my example above I moved the body margin inside the page and then placed elements outside the body margins to imitate the fixed positioning. Then you can use the 100% height on the body for the centre content. Only works in quirks mode.

Anyway have a nice vacation

paul

User Tag List

Thread: div not taking up all available space in IE

Thread Tools

Display

div not taking up all available space in IE

Bookmarks

Bookmarks

Posting Permissions