4 ms·

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

by ge 14y ago

tambourine_man 14y 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>
- ge 14y ago
  Same problem as with "thegooley"s solution.
  - tambourine_man 14y ago
    change height: 10% to min-height: 10% in “.header, .footer” ?
    - ge 14y 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 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.

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

by ge 14y ago

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

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 14y ago
Same problem as with "thegooley"s solution.
- tambourine_man 14y ago
  change height: 10% to min-height: 10% in “.header, .footer” ?
  - ge 14y 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 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.