

Ask HN: Is there a way to do this layout in HTML 5? - ge
http://raw.gibney.org/height_test_quirks
Meanwhile jlft has posted the right answer to this. Scroll way down to see it. Its on the second last position of this thread.
======
tambourine_man
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.

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

~~~
tambourine_man
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
Same problem as with "thegooley"s solution.

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

~~~
ge
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.

------
JOfferijns
You should probably ask this question on StackOverflow.com

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

------
the1
<http://pastehtml.com/view/c6bge5hig.html>

table { position:absolute; top: 0; bottom: 0; ....

~~~
ge
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.

------
fallenhitokiri
You need 6 div. one container. Everything goes in there. One header, one
wrapper that holds the two big boxes and a footer.

Set HTML & body height to 100%. If you don't your container and other divs
will likely ignore your height:100%

Everything else you need from there is float, position, clear, width and
height. Should even be compatible with most versions of IE.

Sp yes it is possible and even simple with HTML and CSS. No need for tables.

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

------
jlft
Add this:

form { height: 100%; } td {height: 100%; }

~~~
ge
The best solution so far!

<http://raw.gibney.org/height_test_standards_1>

Only problem: The textare is slighty misaligned.

~~~
b0gey5
you just need to add this to textarea

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

~~~
ge
Awesome! We got it!

<http://raw.gibney.org/height_test_standards_2>

------
Olreich
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.

~~~
ge
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.

------
Fyrilin
You may find this useful: [http://matthewjamestaylor.com/blog/equal-height-
columns-2-co...](http://matthewjamestaylor.com/blog/equal-height-
columns-2-column.htm)

------
EvaPeron
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...

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

~~~
ge
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
Ah yes, this method does set the height of the header and footer as constant.

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

------
dous
<https://gist.github.com/3193548>

~~~
ge
Same problem as with "the1"s solution.

------
meric
Do you have to use <table>?

~~~
leviathan
that's precisely his question I guess; can you do this in HTML5 and CSS
without resorting to javascript hacks?

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

