Working With CSS Left and Right Frame Layout
| Previous | Home | Next |
Following example will show how to make left and right frame layout in CSS:
<html>
<head>
<title>CSS Left and Right Frames Layout</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}
#framecontentLeft, #framecontentRight{
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 100%;
overflow: hidden;
background-color: navy;
color: white;
}
#framecontentRight{
left: auto;
right: 0;
width: 150px;
overflow: hidden;
background-color: navy;
color: white;
}
#maincontent{
position: fixed;
top: 0;
left: 200px;
right: 150px;
bottom: 0;
overflow: auto;
background: #fff;
}
.innertube{
margin: 15px;
}
* html body{
padding: 0 150px 0 200px;
}
* html #maincontent{
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="framecontentLeft">
<div class="innertube">
<h1>CSS Left and Right Frames Layout</h1>
<h3>Sample text here</h3>
</div>
</div>
<div id="framecontentRight">
<div class="innertube">
<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"
>R4R CSS Tutorials </a></p>
</div>
</div>
</body>
</html>
output
| Previous | Home | Next |