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

Just put the textarea in the left panel.

He asked for the layout in HTML5, not the same code. Separating content from presentation is a better practice than shoveling it all in a table.

   
   
           
               * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
       
               html, body, form { 
                   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%;
               }

               textarea { width: 100%; height: 100% }
   
           
   
           
               
                   Hey I'm a header
                   
                       
                           Write here
                       
                       Right Panel
                   
                   
                       I'm a footer, hit submit

                       
                   
               
           

Same problem as with "thegooley"s solution.

Not the same. In the original, the footer adopts its height to its content. Putting in a min-height of 10% will not accomplish that. You can simply verify it by comparing your solution and the original visually. They look completely different.

Please be aware, that meanwhile there is a working solution here:

http://raw.gibney.org/height_test_standards_2

It was suggested by jlft but his post got no upvotes, so its burried almost on the bottom of this thread.