I Lately had to build the layout for a website, this is a simple layout, and the picture represents what I want it to look. The challenge is to have a layout that would fill the width of the screen while having a fixed width left column. So here is my solution :
<html>
<head>
<style>
html, body
{
padding:0;
margin: 0;
width: 100%;
height: 100%;
}
div#page
{
width: 100%;
height: 100%;
}
div#header
{
background-color: #FF0000;
height: 80px;
}
div#menu
{
float: left;
width: 150px;
background-color: #00FF00;
}
div#pagecontent {
margin-left: 150px;
background-color: #0000FF;
}
div#footer
{
background-color: #636363;
text-align: center;
}
</style>
</head>
<body>
<div id="page">
<div id="header">
<h1>This is my title</h1>
<h2>This is my subtitle</h2>
</div>
<div id="menu">
<ul>
<li>this</li>
<li>is</li>
<li>my</li>
<li>left</li>
<li>menu</li>
<li>this</li>
<li>is</li>
<li>my</li>
<li>left</li>
<li>menu</li>
<li>this</li>
<li>is</li>
<li>my</li>
<li>left</li>
<li>menu</li>
</ul>
</div>
<div id="pagecontent">
This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page. This is the content onf my page.
</div>
<div id="footer">
this is my footer
</div>
</div>
<BODY>
</html>
No comments:
Post a Comment