14083

How to set element (DIV/TABLE/other) height to 100% of its container?

Question:

I am trying to accomplish a simple 'liquid layout' with two width=50% boxes on the left and one width=50% box on the right, where the height of the rightmost box follows the leftmost boxes and vice versa. I want a spacing between the boxes of 10px, a nice 3d feel for the boxes and no border or margin on the outside.

I have tried to implemented this using DIV tags only, but didn't succeed. Due to lack of time I switched to a more familiar TABLE/TR/TD approach. Indeed the table cell height followed the total table height, however when I introduces DIV tags in the table cells so I could implement my 3D box border, the height shrinked again. No matter at which places in my code I try to put "height=100%", my browser doesn't seem to act on it.

The problem is related to a question already asked on StackOverflow before (linked <a href="https://stackoverflow.com/questions/589754/div-stretch-to-height-100-in-a-table-cell" rel="nofollow">here</a>). The proposed solution there is to use TABLE instead of DIV. In my case this will not work if I want to stick to both my 3D boxes and the spacing between my cells.

I have included my code below containing two different approaches, both not working. Can somebody suggest me a way to fix my code so that the height of the box on the right will become 100% of the size of its TD container (shown green in the example?). Any other approaches with the same result are also very welcome. <strong>UPDATE:<em></em></strong> Tor Valamo posted an answer pointing out where to place the 100%. Unfortunately, the result works only in IE and Firefox, not Chrome. The search therefore continued for a browser-independent solution.

<strong>UPDATE:</strong> <em>After receiving several useful suggestions, I've posted my own solution which is the only one acceptable to me at this point. Unfortunately it uses TABLE not DIV. Some work has been done on a DIV solution, for anyone who'd like to finish the job, the sources codes are available <a href="http://www.antiflu.dds.nl/layout.zip" rel="nofollow">here</a>.</em>

<html> <head> <style> .outsidetable { border-collapse: collapse; border-style: hidden; } .outsidecell { border-width: 10px; border-color: #FFF; padding: 0px; border-style: solid; background-color: #0F0; } .fancybox { border-style: outset; border-color: yellow; border-width: 2px; background-color: #CCF; } </style> </head> <body> <!-- First example, using DIV to draw the boxes and TABLE/TR/TD for the layout -->

<table class=outsidetable> <tr> <td class=outsidecell><div class=fancybox> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div></td> <td class=outsidecell rowspan=2><div class=fancybox height=100% style="height: 100%"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div></td> </tr> <tr> <td class=outsidecell><div class=fancybox> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div></td> </tr> </table>

<!-- Second example, using TABLE instead of DIV to draw the boxes (and again TABLE/TR/TD for the layout) -->

<table class=outsidetable> <tr> <td class=outsidecell><table class=fancybox><tr><td> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </td></tr></table></td> <td class=outsidecell rowspan=2><table class=fancybox height=100% style="height: 100%"><tr><td height=100% style="height: 100%"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </td></tr></table></td> </tr> <tr> <td class=outsidecell><table class=fancybox><tr><td> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </td></tr></table></td> </tr> </table>

</body> </html>

Answer1:

First, do not use tables for layout. That's a semantic no-no. With that out of the way, see <a href="http://matthewjamestaylor.com/blog/perfect-3-column.htm" rel="nofollow">The Perfect 3 Column Liquid Layout by Matthew James Taylor</a>. Matthew has created a great implementation of multi-column liquid layouts that can be sized in either percentage or em widths.

Answer2:

Use the outline of the table cell instead of the border, and it will work. And drop the containing div inside it too!

<html> <head> <style> table { border-spacing:10px; border:0px; } td { width:50%; outline-style:outset; outline-color:yellow; background-color:#CCF; vertical-align:top; } * html td { /* IE hack because it doesn't recognise outline */ border-style:outset; border-color:yellow; } </style> </head> <body> <table> <tr> <td> Lorem ipsum dolor sit amet </td> <td rowspan="2"> Lorem ipsum dolor sit amet </td> </tr> <tr> <td> Lorem ipsum dolor sit amet </td> </tr> </table> </body> </html>

Answer3:

Try:

.outsidecell { height:100%; <other stuff here> }

This works, because there is an 'inner' content box which is where the drawing of the content happens. This inner box is only as big as the content it has. So even if that content says 100%, it will only be 100% to itself, and not the parent container. So you need to expand the parent container to its own actual 100% size.

That's probably not the actual mechanics behind it, but in so many words...

Answer4:

Here's a div based one, which works as long as the right cell isn't filled with more than the other two combined. This works in IE only if you use an xhtml doctype.

.inner { border:5px outset yellow; background-color:#CCF; } .outer { position:relative; border:1px solid #000; width:500px; } .left { position:relative; width:240px; } .right { position:absolute; top:0; right:0; bottom:0; width:240px; } <div class="outer"> <div class="inner left"> Lorem<br /> Lorem<br /> </div> <div class="inner left"> Schmorem<br /> Schmorem<br /> Schmorem<br /> </div> <div class="inner right"> Ipsum schmipsum!<br /> Ipsum schmipsum!<br /> </div> </div>

Answer5:

As horrible as the use of tables may be, after playing with all the proposed solutions I have found only one solution (using tables) that satisfies all my constraints. One day I hope to be able to translate Andy's code to a working solution with DIV's, right now I'm afraid I'm stuck with this. <strong>EDIT:</strong> <em>For anyone who'd like to try, all source codes are available <a href="http://www.antiflu.dds.nl/layout.zip" rel="nofollow">here</a>.</em>

To recap, my constraints were,

<ul><li>Completely liquid layout: any cell follows the height of any other cell</li> <li>Spacing between the cells of 10px inside (but not outside)</li> <li>3D border around the cells</li> <li>Working for all browsers that I have on my computer (Chrome, IE, Firefox)</li> </ul>

Summarizing my solution, I've used empty spacer cells to implement the cell spacing since all other spacing methods known to me didn't satisfy all the constraints:

<ul><li>CSS border-spacing adds a border around the whole table too that I don't want</li> <li>Selective cell borders limit my ability to add the 3D borders to my cells</li> </ul>

Filling the spacer cells with nbsp's made them too high, so I chose to leave them empty and set the CSS empty-cells property to "show". The other option would have been to fill them up with 1x1 spacer GIF's but that is <em>so</em> 1990...

The code:

<html> <head> <style> .outsidetable { border-collapse: separate; border-style: hidden; empty-cells: show; } .spacercell { width: 10px; height: 10px; border-style: none; } .contentcell { border-style: outset; border-color: yellow; border-width: 2px; background-color: #CCF; } </style> </head> <body>

<table class=outsidetable> <tr> <td class=contentcell> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </td> <td class=spacercell></td> <td class=contentcell rowspan=3> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </td> </tr> <tr> <td class=spacercell colspan=3></td> </tr> <tr> <td class=contentcell> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </td> <td class=spacercell></td> </tr> </table>

</body> </html>

Answer6:

If you set a height on your columns and height of the div = 100%, It will work for you..that is if your design allows you to set the height on the TD :).

Recommend

  • How to code a nested ordered list within an unordered list item?
  • How I fix a “GADInsterstitial.h” file not found… but it is in my list?
  • Why doesn't die in alarm signal handler kill the process?
  • c++ Socket select and receive problem
  • Is it good practice to put Edge Side Includes into my templates?
  • Moving data between processes in Spartan 3
  • how to display   in Mozilla using XSL.
  • How to wait for all async tasks to finish in Node.js?
  • XNU incudes in Kext
  • Generic classes with Collection getter of other types
  • Is there a way to set up a fallback for the formAction attribute in HTML5?
  • Problems with toDataURL HTML5 other ways to get canvas data?
  • “mvn clean generate-source” could not resolve dependencies
  • Splash Screen will not display
  • Most efficient way to move table rows from one table to another
  • How do I get the list of bad records that didn't load in Bigquery?
  • Clear activity stack before launching another activity
  • Pycharm: Marking a folder as 'sources root' is not recursive for subfolders
  • Security issues with PHP's Readfile method
  • Is playing sound in Javascript performance heavy?
  • Excel's Macro-Recorder usage
  • Installed module is empty
  • How to use carriage return with multiple line?
  • Could not find rake using whenever rails
  • Chrome doesn't support silverlight anymore? How to solve this?
  • Google Custom Search with transparent background
  • Q promise. Difference between .when and .then
  • Insert into database using onclick function
  • Display issues when we change from one jquery mobile page to another in firefox
  • Ajax jQuery multiple calls at the same time - long wait for answer and not able to cancel
  • What is Eclipse's Declaration View used for?
  • How to recover from a Spring Social ExpiredAuthorizationException
  • ILMerge & Keep Assembly Name
  • Can I make an Android app that runs a web view in Chrome 39?
  • Javascript convert timezone issue
  • what is the difference between the asp.net mvc application and asp.net web application
  • Weird JavaScript statement, what does it mean?
  • Large data - storage and query
  • WOWZA + RTMP + HTML5 Playback?
  • need help with bizarre java.net.HttpURLConnection behavior