473,396 Members | 1,886 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > html / css > questions > css conundrum - divs not expanding to fill space correctly.

Join Bytes to post your question to a community of 473,396 software developers and data experts.

CSS conundrum - divs not expanding to fill space correctly.

bakum
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
4 4789
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
AricC
1,892 Expert 1GB
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
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
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

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

Similar topics

4
Expanding a textarea to fill a window, but without requiring scrollbars
by: David | last post by:
It's sad to say, but when using the AOL web site, like to send an email, they have a nifty capability such that when a window is resized, the textarea where the message is input expands not only...
Javascript
3
unwanted margin betwen divs
by: Brian | last post by:
I have a page with content, navigation, and footer divs, in that order. The nav div has position: absolute, width 8em, on green background. The other divs have an 8em green left border, such that...
HTML / CSS
2
Static size centered DIV between two fluid DIVs?
by: David Winter | last post by:
This is a totally trivial CSS problem, I'm sure, but I don't get it. I want a centered DIV with a fixed width between two other DIVs that should fill the rest of the window/viewport (= 100%). How...
HTML / CSS
3
Positioning DIVs within DIVs (need hack)
by: Oddball | last post by:
I have a problem with the positioning of two divisions. They are containined within a content division in which all the page content happens (ie not the menus, etc.). The behavior I would like...
HTML / CSS
1
Remove space between hidden DIVs in Internet Explorer
by: tabert | last post by:
I want to use JavaScript when a button is clicked to show and hide a SPAN or DIV. This works in both IE and Netscape, but what I'd like to happen is for there to be no white space where the hidden...
Javascript
2
3 floated DIVs in a row in IE - gap between last two DIVs - why?
by: tasman.hayes | last post by:
I'm experimenting with converting a site from a table layout to CSS. I'm floating three DIVs in a row for the top of a website (a logo, navigation buttons and a email list signup box). The DIVs...
HTML / CSS
0
expanding a block to fill up all the space available
by: Jean-François Michaud | last post by:
Hello, I was wondering how we could expand a block or anything else for that matter to fill all the available space in the body. I am working with XSLT generating XSL:FO and I need my "blank...
.NET Framework
4
floating divs
by: tbirnseth | last post by:
I'm having trouble between IE and FF. For once, IE behaves as I would expect, but FF doesn't. Basically I have a container with two floating DIVs in it. One floats left and the other right. I then...
HTML / CSS
3
Autosizing and column spanning conundrum
by: =?Utf-8?B?bWljaGFlbCBzb3JlbnM=?= | last post by:
When I set a label to span 2 columns of a 2-column TableLayoutPanel, set both of these plus the containing form to AutoSize, then at runtime fill in the label, the autosizing does not take the...
C# / C Sharp
0
How to turn on java script in a villaon keypad mobile phone
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
Java
0
Migrating Website to Cloud - Emmanuel Katto
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
General
0
BarryA
Navigating the Data Structures and Algorithms (DSA)
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
Algorithms / Advanced Math
1
Looking to do Android software development, any suggestions? Is flutter better?
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
General
1
Is that possible of reading the .csv file in column wise and the column have different lengths ?
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
C / C++
0
marktang
What is ONU?
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
General
0
The easy way to turn off automatic updates for Windows 10/11
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
Windows Server
0
tracyyun
Discussion: How does Zigbee compare with other wireless protocols in smart home applications?
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
General
0
agi2029
AI Job Threat for Devs
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
Career Advice

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!