Ask HN: Is there a way to do this layout in HTML 5? (opens in new tab)

(raw.gibney.org)

26 pointsge13y ago31 comments

Meanwhile jlft has posted the right answer to this. Scroll way down to see it. Its on the second last position of this thread.

31 comments

27 comments · 12 top-level

meric13y ago· 4 in thread

Do you have to use <table>?

leviathan13y ago

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

geOP13y ago

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

jbranchaud13y ago

IMO, the use of <table> should be avoided in a solution, tables are not intended for page layout.

geOP13y ago

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

tambourine_man13y ago· 2 in thread

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.

geOP13y ago

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

tambourine_man13y 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>

1 more reply

jlft13y ago· 2 in thread

Add this:

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

geOP13y ago

The best solution so far!

http://raw.gibney.org/height_test_standards_1

Only problem: The textare is slighty misaligned.

b0gey513y ago

you just need to add this to textarea

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

1 more reply

thegooley13y ago· 2 in thread

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

geOP13y ago

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.

thegooley13y ago

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

JOfferijns13y ago· 1 in thread

You should probably ask this question on StackOverflow.com

geOP13y ago

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

the113y ago· 1 in thread

http://pastehtml.com/view/c6bge5hig.html

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

geOP13y ago

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.

fallenhitokiri13y ago· 1 in thread

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.

geOP13y ago

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

Olreich13y ago· 1 in thread

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.

geOP13y ago

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.

dous13y ago· 1 in thread

https://gist.github.com/3193548

geOP13y ago

Same problem as with "the1"s solution.

Fyrilin13y ago

You may find this useful: http://matthewjamestaylor.com/blog/equal-height-columns-2-co...

EvaPeron13y ago

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

benmanns13y ago

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

j / k navigate · click thread line to collapse

31 comments

27 comments · 12 top-level

meric13y ago· 4 in thread

Do you have to use <table>?

leviathan13y ago

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

geOP13y ago

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

jbranchaud13y ago

IMO, the use of <table> should be avoided in a solution, tables are not intended for page layout.

geOP13y ago

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

tambourine_man13y ago· 2 in thread

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.

geOP13y ago

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

tambourine_man13y 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>

1 more reply

jlft13y ago· 2 in thread

Add this:

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

geOP13y ago

The best solution so far!

http://raw.gibney.org/height_test_standards_1

Only problem: The textare is slighty misaligned.

b0gey513y ago

you just need to add this to textarea

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

1 more reply

thegooley13y ago· 2 in thread

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

geOP13y ago

thegooley13y ago

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

JOfferijns13y ago· 1 in thread

You should probably ask this question on StackOverflow.com

geOP13y ago

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

the113y ago· 1 in thread

http://pastehtml.com/view/c6bge5hig.html

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

geOP13y ago

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.

fallenhitokiri13y ago· 1 in thread

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.

geOP13y ago

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

Olreich13y ago· 1 in thread

geOP13y ago

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.

dous13y ago· 1 in thread

https://gist.github.com/3193548

geOP13y ago

Same problem as with "the1"s solution.

Fyrilin13y ago

You may find this useful: http://matthewjamestaylor.com/blog/equal-height-columns-2-co...

EvaPeron13y ago

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

benmanns13y ago

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

j / k navigate · click thread line to collapse