Hacker News new | ask | show | jobs
by tambourine_man 5072 days ago
Sure there is, here is my saturday morning no coffee's take on it:

   <!doctype html>
   
           <style type="text/css">
               * { -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%;
               }
   
           </style>
   
           <body>
               <div class="header">Hey I'm a header</div>
               <div class="content">
                   <div class="leftPanel">Left Panel Here</div>
                   <div class="rightPanel">Right Panel</div>
               </div>
               <div class="footer">I'm a footer</div>
           </body>
You should probably ask this question on StackOverflow.com

And it's probably been answered there already.But what heck.
1 comments
ge 5072 days ago
Its not the same. You made a lot of changes. For example deleting the textarea and other elements.
link
tambourine_man 5072 days ago
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>
link
ge 5072 days ago
Same problem as with "thegooley"s solution.
link
tambourine_man 5072 days ago
change height: 10% to min-height: 10% in “.header, .footer” ?
link
ge 5072 days ago
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.

link