Divs sharing the total size (not percentage)

Question

Is there away to connect the sizes of divs as I did with the frames below? I'm talking about the * in rows="*, 16", that takes the remaining space.

<frameset frameborder="0"  rows="70, *, 30">
   <frame name="toolbar" src="toolbar.html" marginwidth="8px" marginheight="8px" />

   <frameset id="lineNumFrameset" frameborder="0" cols="50, *">
      <frameset rows="*, 16">
      <frame id="other_frame" name="lineNum" src="lineNum.html" marginwidth="8px" marginheight="8px" align="top" />
      </frameset>

      <frame name="editor" src="editor.html" marginwidth="8px" marginheight="8px" />
   </frameset>

   <frame name="statusbar" src="statusbar.html" marginwidth="8px" marginheight="8px" />
</frameset>

Thank you.

Answer 1

Looks like you want a fluid three column layout.

Using margins and float will work. Float your first div to the left and set it to the width of what you want the left most column width to be. Float your second div on the right and set its width. Then your third div will not float, but you'll set its left margin to the width of the left column, its right margin to the width of the right column.

There will be some issues to resolve if either of your columns are greater in height than your middle div, but that's solvable by creating a containing floated div.

Edit: added example:

http://css.maxdesign.com.au/selectutorial/steps/step22.htm

Answer 2

My solution to the problem is to use the onresize event with the viewport (document.documentElement.clientHeight) set on the relevant height CSS property with JavaScript.