SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Threaded View

  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2004
    0 Post(s)
    0 Thread(s)

    div not taking up all available space in IE

    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
    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:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
     <?xml version="1.0" encoding="UTF-8"?>
     <html xmlns="" xml:lang="nl">
     <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;}
     <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>
    Any help would be greatly appreciated!

    Last edited by TimH; Aug 25, 2004 at 02:03. Reason: removed error in CSS


Posting Permissions

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