SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  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 02:03. Reason: removed error in CSS

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,282
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Belgium
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,282
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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


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
  •