DIV placement

  • alex89
  • Bronze Member
  • Bronze Member
  • User avatar
  • Posts: 239
  • Loc: Western Australia

Post 3+ Months Ago

Code: [ Select ]
_____________
|            |
|   Div 1    |
|            |
|____________|
|____Div 2___|
  1. _____________
  2. |            |
  3. |   Div 1    |
  4. |            |
  5. |____________|
  6. |____Div 2___|


I'm trying to make the above. Div 2 is only a text box, two characters high. I want the top div to go down to it, and overflow.


Code: [ Select ]
.div1 {
    height:80%;
    overflow: auto;
}
.div2 {

}
  1. .div1 {
  2.     height:80%;
  3.     overflow: auto;
  4. }
  5. .div2 {
  6. }


But I really want something like msgarea height = window height - 100px. Is that possible?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • alex89
  • Bronze Member
  • Bronze Member
  • User avatar
  • Posts: 239
  • Loc: Western Australia

Post 3+ Months Ago

Div 2 is now fixed and sitting at the bottom nicely, but I can't get div 1 to join it.

Code: [ Select ]
#maintext { border: 0; background-color:#EEEEEE; padding-bottom:70px;}
#footer { position: fixed; clear: both; width: 100%; height: 70px; bottom: 0; border: 0; background-color: #e9e9e2; }
  1. #maintext { border: 0; background-color:#EEEEEE; padding-bottom:70px;}
  2. #footer { position: fixed; clear: both; width: 100%; height: 70px; bottom: 0; border: 0; background-color: #e9e9e2; }
  • alex89
  • Bronze Member
  • Bronze Member
  • User avatar
  • Posts: 239
  • Loc: Western Australia

Post 3+ Months Ago

I don't think I was very clear before - see example pic below.

Image
  • alex89
  • Bronze Member
  • Bronze Member
  • User avatar
  • Posts: 239
  • Loc: Western Australia

Post 3+ Months Ago

I've got this, but it's a bit dodgy.

Code: [ Select ]
#maintext {position: fixed; clear: both; width:auto; background-color:#EEEEEE; top: 50px; bottom: 70px; overflow:auto; left: 0px; right: 4px; padding-left:5px}
#footer {position: fixed; clear: both; width: 100%; height: 70px; bottom: 0; border: 0; background-color: #e9e9e2; left: 0; padding-left: 5px}
  1. #maintext {position: fixed; clear: both; width:auto; background-color:#EEEEEE; top: 50px; bottom: 70px; overflow:auto; left: 0px; right: 4px; padding-left:5px}
  2. #footer {position: fixed; clear: both; width: 100%; height: 70px; bottom: 0; border: 0; background-color: #e9e9e2; left: 0; padding-left: 5px}
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

How about the following code?
HTML Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
   <head>
      <title>
         Test Document
      </title>
      <style type="text/css">
         * {
            margin: 0;
            padding: 0;
         }
 
         #header {
            position: fixed;
            width: 100%;
            height: 10%;
            background-color: #cecece;
         }
 
         #content {
            position: fixed;
            overflow: scroll;
            width: 100%;
            height: 80%;
            top: 10%;
            bottom: 10%;
         }
 
         #footer {
            position: fixed;
            bottom: 0px;
            width: 100%;
            height: 10%;
            background-color: #cecece;
         }
      </style>
   </head>
   <body>
      <div id="header">
         <p>Header</p>
      </div>
      <div id="content">
         <p>Content</p>
      </div>
      <div id="footer">
         <p>Footer</p>
      </div>
   </body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  4.    <head>
  5.       <title>
  6.          Test Document
  7.       </title>
  8.       <style type="text/css">
  9.          * {
  10.             margin: 0;
  11.             padding: 0;
  12.          }
  13.  
  14.          #header {
  15.             position: fixed;
  16.             width: 100%;
  17.             height: 10%;
  18.             background-color: #cecece;
  19.          }
  20.  
  21.          #content {
  22.             position: fixed;
  23.             overflow: scroll;
  24.             width: 100%;
  25.             height: 80%;
  26.             top: 10%;
  27.             bottom: 10%;
  28.          }
  29.  
  30.          #footer {
  31.             position: fixed;
  32.             bottom: 0px;
  33.             width: 100%;
  34.             height: 10%;
  35.             background-color: #cecece;
  36.          }
  37.       </style>
  38.    </head>
  39.    <body>
  40.       <div id="header">
  41.          <p>Header</p>
  42.       </div>
  43.       <div id="content">
  44.          <p>Content</p>
  45.       </div>
  46.       <div id="footer">
  47.          <p>Footer</p>
  48.       </div>
  49.    </body>
  50. </html>
Works perfectly for me. I checked it in Firefox 2 and MSIE 7... works perfectly. The way I did it, it's fluid as well.
  • alex89
  • Bronze Member
  • Bronze Member
  • User avatar
  • Posts: 239
  • Loc: Western Australia

Post 3+ Months Ago

Having a few troubles with this - see my solution at http://www.uwadb.com/chat/

Also in IE6 (which I'm afraid my uni uses in a few computer labs), the bottom div won't stay at the bottom. Any IE6 fix for footers?

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 73 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.