CSS

Working with CSS Left Frame Layout
Previous Home Next

Layout is the most essential part for website designing. It supports to website in order to good looking and attaractive.Following example is for creating left layout frame.

<head>
<title>CSS Left Frame Layout</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%; 
max-height: 100%; 
}

#framecontent{
position: absolute;
top: 0;
bottom: 0; 
left: 0;
width: 200px;
height: 100%;
overflow: hidden;
background: navy;
color: white;
}

#maincontent{
position: fixed;
top: 0; 
left: 200px;
right: 0;
bottom: 0;
overflow: auto; 
background: #fff;
}

.innertube{
margin: 15px; 
}

* html body{ 
padding: 0 0 0 200px; 
}

* html #maincontent{ 
height: 100%; 
width: 100%; 
}
</style>
</head>

<body>
<div id="framecontent">
<div class="innertube">
<h1>CSS Left Frame Layout</h1>
<h3>Sample text here</h3>
</div>
</div>
<div id="maincontent">
<div class="innertube">
<p style="text-align: center"
>Credits: <a href="http://www.r4r.co.in"
>E Learning Portal</a></p>
</div>
</div>
</body>
</html>

 

output

Previous Home Next