Ask HN: Is there a way to do this layout in HTML 5?
raw.gibney.org
Meanwhile jlft has posted the right answer to this. Scroll way down to see it. Its on the second last position of this thread.
raw.gibney.org
<!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>
And it's probably been answered there already.But what heck.
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>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.
table { position:absolute; top: 0; bottom: 0; ....
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.
form { height: 100%; } td {height: 100%; }
http://raw.gibney.org/height_test_standards_1
Only problem: The textare is slighty misaligned.
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;