More

ge · on July 28, 2012

jlft already suggested this. Please see his reply. And if possible upvote it. He made the best solution so far, but his post is burried down below.

ge · on July 28, 2012

Its not the same. You made a lot of changes. For example deleting the textarea and other elements.

tambourine_man · on July 28, 2012

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.

   <!doctype html>
   
           <style type="text/css">
               * { -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% }
   
           </style>
   
           <body>
               <form action="go.php" method="post">
                   <div class="header">Hey I'm a header</div>
                   <div class="content">
                       <div class="leftPanel">
                           <textarea name="text">Write here</textarea>
                       </div>
                       <div class="rightPanel">Right Panel</div>
                   </div>
                   <div class="footer">
                       I'm a footer, hit submit<br>
                       <input type="submit" class="submit" value="submit" name="" />
                   </div>
               </form>
           </body>

ge · on July 28, 2012

Same problem as with "thegooley"s solution.

tambourine_man · on July 28, 2012

change height: 10% to min-height: 10% in “.header, .footer” ?

ge · on July 28, 2012

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.

ge · on July 28, 2012

The best solution so far!

http://raw.gibney.org/height_test_standards_1

Only problem: The textare is slighty misaligned.

b0gey5 · on July 28, 2012

you just need to add this to textarea

-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;

ge · on July 28, 2012

Awesome! We got it!

http://raw.gibney.org/height_test_standards_2

ge · on July 28, 2012

There have been solutions been suggested without tables. Look through this thread. Nothing works so far.

ge · on July 28, 2012

No, its not the same. When the text in the footer wraps, it leaves the page so you cannot read it anymore. In my example that does not happen. If you left all the text the same, that would be easier to see.

thegooley · on July 28, 2012

Ah yes, this method does set the height of the header and footer as constant.

ge · on July 28, 2012

Good suggestion. Will do that if no solution comes up on HN.

ge · on July 28, 2012

Same problem as with "the1"s solution.

ge · on July 28, 2012

Its not the same. The textarea does not resize to the parents height in this solution. Also it extends into the right half of the screen.

ge · on July 28, 2012

Right, im looking for a pure HTML 5 + CSS solution. Just like it is in quirks mode.

ge · on July 28, 2012

I just need this layout. With or without a table. As long as it looks and behaves the same.