Ask HN: Is there a way to do this layout in HTML 5?

Sure there is, here is my saturday morning no coffee's take on it:<p><pre><code> &#60;!doctype html&#62; &#60;style type="text/css"&#62; * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } html, body { height: 100%; width: 100%; border: 0px; margin: 0px; padding: 0px; } .header,.footer { width: 100%; height: 10%; /*use percentage or fixed size*/ border: 1px solid red; } .content { width: 100%; height: 80%; } .leftPanel, .rightPanel { width: 50%; float: left; border: 1px solid red; height: 100%; } &#60;/style&#62; &#60;body&#62; &#60;div class="header"&#62;Hey I'm a header&#60;/div&#62; &#60;div class="content"&#62; &#60;div class="leftPanel"&#62;Left Panel Here&#60;/div&#62; &#60;div class="rightPanel"&#62;Right Panel&#60;/div&#62; &#60;/div&#62; &#60;div class="footer"&#62;I'm a footer&#60;/div&#62; &#60;/body&#62; </code></pre> <i>You should probably ask this question on StackOverflow.com</i><p>And it's probably been answered there already.But what heck.

You should probably ask this question on StackOverflow.com

<a href="http://pastehtml.com/view/c6bge5hig.html" rel="nofollow">http://pastehtml.com/view/c6bge5hig.html</a><p>table { position:absolute; top: 0; bottom: 0; ....

You need 6 div. one container. Everything goes in there. One header, one wrapper that holds the two big boxes and a footer.<p>Set HTML &#38; body height to 100%. If you don't your container and other divs will likely ignore your height:100%<p>Everything else you need from there is float, position, clear, width and height. Should even be compatible with most versions of IE.<p>Sp yes it is possible and even simple with HTML and CSS. No need for tables.

Add this:<p>form { height: 100%; } td {height: 100%; }

The form is the element screwing you over. It's compressing everything to minimum. Set form{height:100%} and it spans the page again. You can also move the form just inside of the table and get the desired effect.

You may find this useful: <a href="http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm" rel="nofollow">http://matthewjamestaylor.com/blog/equal-height-columns-2-co...</a>

It has been a while since I have played around with HTML (do Java at work, mostly) but surely one can do tables in HTML 5, as in previous versions? If not, something wrong there, IMO...

Is this the kind of code that you're looking for? <a href="http://files.thegooley.com/example-fullpage-app.html" rel="nofollow">http://files.thegooley.com/example-fullpage-app.html</a>

Here's a jsFiddle in HTML5 mode with the table code pre-entered if anyone wants to play with it: <a href="http://jsfiddle.net/bzf9W/" rel="nofollow">http://jsfiddle.net/bzf9W/</a>

<a href="https://gist.github.com/3193548" rel="nofollow">https://gist.github.com/3193548</a>

Do you have to use &#60;table&#62;?