SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Threaded View

  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Belgium
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    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
    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
    Last edited by TimH; Aug 25, 2004 at 01:03. Reason: removed error in CSS


Bookmarks

Posting Permissions

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