This layout shows how to put your backgrounds across the screen at a width of 100%, take up 100% of the height, but centre the content within the page with uniformity.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout #11</title>
<style type="text/css">
*
{
margin:0;
padding:0;
height:100%;
}
html, body
{
font-family:Sans-serif;
}
.contentHolder
{
margin:0 auto;
width:800px;
border-left:10px dotted #69FFBF;
border-right:10px dotted #69FFBF;
padding:10px;
}
#topPart, #middlePart, #bottomPart
{
display:block;
}
#topPart, #bottomPart
{
color:#FFFFFF;
}
#topPart
{
height:200px;
background:#73C2FF;
}
#middlePart
{
height:400px;
}
#bottomPart
{
background:#000000;
min-height:200px;
}
</style>
</head>
<body>
<div id="topPart">
<div class="contentHolder">
<h1>Hello</h1>
</div>
</div>
<div id="middlePart">
<div class="contentHolder">
<h1>The stuff which really matters</h1>
</div>
</div>
<div id="bottomPart">
<div class="contentHolder">
<h1>Goodbye</h1>
</div>
</div>
</body>
</html>
No comments:
Post a Comment