By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,092 Members | 1,650 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,092 IT Pros & Developers. It's quick & easy.

CSS conundrum - divs not expanding to fill space correctly.

bakum
P: 5
Hi, i've got a basic layout as follows:
One large table (height 100%) with two columns, left and right.
Inside the left column are two divs#bottom #top.
Inside the right column is one div#main.

All div CONTENT is variable height, however I want div#main to always be 100% for layout purposes, hence I put a height:100% on it. #top + #bottom + a 10px margin between them need to add up to 100%, but since their sizes are variable I didn't put any height on them at all.

This is not so easy to do. At least, for me it's not so easy. Below is some example code I'm using which replicates the problem I'm seeing on my site. Question: why the heck isn't the #main height:100% doing anything? The layout is perfect besides that one small, eensy, tiny, bitty and completely unacceptable problem.

Extra credit: When the content of the left divs is larger than the content of the right div then the laytout is fine (if I can get the right div height right). But if the content on the right is larger than the content on the left, then I'm going to have the same problem, only reversed. How do I specify I want the BOTTOM left div to expand to take up whatever space is available? Is that possible?


Thanks!
-mb

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3.  <head>
  4.   <style>
  5.    .expand td {
  6.     position: relative;
  7.     height:100%;
  8.     margin:0;
  9.     padding:5px;
  10.     border:3px solid black;  
  11.    }
  12.  
  13.   .expand div {
  14.     padding:5px;
  15.     border:3px solid red;      
  16.    }
  17.  
  18.    .expand div#top {
  19.     background-color:orange;
  20.     margin-bottom:5px;    
  21.    }
  22.  
  23.    .expand div#bottom {
  24.     background-color:yellow;
  25.    }
  26.  
  27.    .expand div#main {
  28.     height:100%;   
  29.     background-color:#c6c6c6; 
  30.     color:white;
  31.    }
  32.  
  33.    .expand div#main table#subMain{
  34.     background-color:#fff; 
  35.     color:black;
  36.    }   
  37.  
  38.   </style>
  39.  </head>
  40.  <body>
  41.   <table class='expand' border='1' width="100%">
  42.    <tbody>
  43.    <tr>
  44.     <td id="left" valign="top">
  45.      <div id="top">0<br /></div>
  46.      <div id="bottom">0<br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />0<br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />0<br /></div>
  47.     </td>
  48.     <td id="right" valign="top">
  49.      <div id="main">Hello, Table
  50.       <table id="subMain">
  51.        <tr>
  52.         <td>hullo, Div!
  53.         </td>
  54.        </tr>
  55.       </table>
  56.  
  57.      </div>
  58.     </td>
  59.    </tr>
  60.    </tbody>
  61.   </table>
  62.  </body>
  63. </html>
  64.  
Feb 21 '07 #1
Share this Question
Share on Google+
4 Replies


P: 24
Tricky. I think there are some techniques out there for making your columns equal length (either by using javascript or background-images), but I didn't get around to finishing this. I've recreated your page without using tables at all (didn't have time to test it properly, but I think it's OK). I would suggest looking into the 100% height issue, maybe starting with some online examples, eg.

http://css-discuss.incutio.com/?page=AnyColumnLongest

Of course, if you don't really need that big box around your content then things become a whole lot easier...

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3.  <head>
  4.   <style>
  5.    #container {
  6.       margin : 0;
  7.       padding : 3px;
  8.         border : 1px solid #ccc;  
  9.       height : 100%;
  10.    }
  11.  
  12.    #left {
  13.      float : left;
  14.      width : 300px;
  15.      border : 3px solid #000;
  16.    }
  17.  
  18.    #right {
  19.      border : 3px solid #000;
  20.      padding : 5px;
  21.      margin-left : 310px;
  22.      min-height : 100%;
  23.      height : 100%;
  24.    }
  25.  
  26.    #main {
  27.      border : 3px solid red;
  28.      padding : 3px;
  29.      background-color : #bbb;
  30.      color : #fff;
  31.    }
  32.  
  33.    #subMain {
  34.      background-color : #fff;
  35.      border : solid 2px #000;
  36.      color : #000;
  37.      padding : 2px;
  38.      margin : 4px;
  39.      line-height : 2em;
  40.      display : inline;
  41.    }
  42.  
  43.    #top {
  44.      background-color :orange;
  45.      padding : 4px;
  46.      margin : 4px;
  47.      border : solid 3px red;
  48.    }
  49.  
  50.    #bottom {
  51.      background-color :yellow;
  52.      padding : 4px;
  53.      margin : 4px;
  54.      border : solid 3px red;
  55.    }
  56.  
  57.    #footer {
  58.      clear : both;
  59.      height : 0;
  60.      line-height : 0;
  61.    }
  62.  
  63.   </style>
  64.  </head>
  65.   <body>
  66.     <div id="container">
  67.       <div id="left">
  68.         <div id="top">0<br /></div>
  69.         <div id="bottom">0<br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />0<br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />0<br /></div>
  70.       </div>
  71.       <div id="right">
  72.         <div id="main">
  73.           Hello, Table <br />
  74.           <div id="subMain">hullo, Div!</div>
  75.         </div>
  76.       </div>
  77.       <div id="footer">&nbsp;</div>
  78.       </div>
  79.     </div>
  80.   </body>
  81. </html>
  82.  
Feb 22 '07 #2

Expert 100+
P: 1,892
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3.  <head>
  4.   <style>
  5.    .expand td {
  6.     position: relative;
  7.     height:100%;
  8.     margin:0;
  9.     padding:5px;
  10.     border:3px solid black;  
  11.    }
  12.  
  13.   .expand div {
  14.     padding:5px;
  15.     border:3px solid red;      
  16.    }
  17.  
  18.    .expand div#top {
  19.     background-color:orange;
  20.     margin-bottom:5px;    
  21.    }
  22.  
  23.    .expand div#bottom {
  24.     background-color:yellow;
  25.    }
  26.  
  27.    .expand div#main {
  28.     height:100%;   
  29.     background-color:#c6c6c6; 
  30.     color:white;
  31.    }
  32.  
  33.    .expand div#main table#subMain{
  34.     background-color:#fff; 
  35.     color:black;
  36.    }   
  37.  
  38.   </style>
  39.  </head>
  40.  <body>
  41.   <table class='expand' border='1' width="100%">
  42.    <tbody>
  43.    <tr>
  44.     <td id="left" valign="top">
  45.      <div id="top">0<br /></div>
  46.      <div id="bottom">0<br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />0<br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />0<br /></div>
  47.     </td>
  48.     <td id="right" valign="top">
  49.      <div id="main">Hello, Table
  50.       <table id="subMain">
  51.        <tr>
  52.         <td>hullo, Div!
  53.         </td>
  54.        </tr>
  55.       </table>
  56.  
  57.      </div>
  58.     </td>
  59.    </tr>
  60.    </tbody>
  61.   </table>
  62.  </body>
  63. </html>
  64.  
Why are you using CSS for only somethings? Just curious
Feb 22 '07 #3

bakum
P: 5
Why are you using CSS for only somethings? Just curious
you mean like the valigns on the <td>'s? I think just habit. I'm used to typing them inline and haven't needed to get unused to it so I type them inline.
Feb 22 '07 #4

bakum
P: 5
Tricky. I think there are some techniques out there for making your columns equal length (either by using javascript or background-images), but I didn't get around to finishing this. I've recreated your page without using tables at all (didn't have time to test it properly, but I think it's OK). I would suggest looking into the 100% height issue, maybe starting with some online examples, eg.

http://css-discuss.incutio.com/?page=AnyColumnLongest

Of course, if you don't really need that big box around your content then things become a whole lot easier...

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3.  <head>
  4.   <style>
  5.    #container {
  6.       margin : 0;
  7.       padding : 3px;
  8.         border : 1px solid #ccc;  
  9.       height : 100%;
  10.    }
  11.  
  12.    #left {
  13.      float : left;
  14.      width : 300px;
  15.      border : 3px solid #000;
  16.    }
  17.  
  18.    #right {
  19.      border : 3px solid #000;
  20.      padding : 5px;
  21.      margin-left : 310px;
  22.      min-height : 100%;
  23.      height : 100%;
  24.    }
  25.  
  26.    #main {
  27.      border : 3px solid red;
  28.      padding : 3px;
  29.      background-color : #bbb;
  30.      color : #fff;
  31.    }
  32.  
  33.    #subMain {
  34.      background-color : #fff;
  35.      border : solid 2px #000;
  36.      color : #000;
  37.      padding : 2px;
  38.      margin : 4px;
  39.      line-height : 2em;
  40.      display : inline;
  41.    }
  42.  
  43.    #top {
  44.      background-color :orange;
  45.      padding : 4px;
  46.      margin : 4px;
  47.      border : solid 3px red;
  48.    }
  49.  
  50.    #bottom {
  51.      background-color :yellow;
  52.      padding : 4px;
  53.      margin : 4px;
  54.      border : solid 3px red;
  55.    }
  56.  
  57.    #footer {
  58.      clear : both;
  59.      height : 0;
  60.      line-height : 0;
  61.    }
  62.  
  63.   </style>
  64.  </head>
  65.   <body>
  66.     <div id="container">
  67.       <div id="left">
  68.         <div id="top">0<br /></div>
  69.         <div id="bottom">0<br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />0<br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />0<br /></div>
  70.       </div>
  71.       <div id="right">
  72.         <div id="main">
  73.           Hello, Table <br />
  74.           <div id="subMain">hullo, Div!</div>
  75.         </div>
  76.       </div>
  77.       <div id="footer">&nbsp;</div>
  78.       </div>
  79.     </div>
  80.   </body>
  81. </html>
  82.  

Thanks, Conan. I can try the div only layout but I've not had a huge amount of success using divs vs tables cross-browser-wise. The tables are just SO much more reliable and predictable across browsers, in my experience. Which probably means I'm not as sharp with CSS as I could be, but then if I were I wouldn't be posting here. The onyl reason I'm even using divs at all is so I can implement Nifty Corners. if not for that I'd just use straight tables and there's be no problem.

I have noted after copious amounts of research this problem is common and not solvable with css without sacrificing a certain amount of dynamic layout. You have to specifiy heights at some point or else you get what I'm getting, because div height is dictated by content height. There are some javascript workarounds, like you said, and I think I'm going to end up down that road.
Feb 22 '07 #5

Post your reply

Sign in to post your reply or Sign up for a free account.