Most tell me not to create a page layout with tables but with divs and CSS. Cool - I can go with that. Sorry for a basic question.
I would like to have the center (content) stretch to left, right, top and bottom to the visible page. If the content grows beyond the visible page with the T,L,R,B divs, it can scroll. The left, right, top, bottom divs are fixed at their position in the visible page. Fiddling around, I can never get there.
Any suggestions on how to attack this?
|--------------------------------| <--- Visible page
| Top |
|--------------------------------| Right/left fixed with stretched height
|------| Center/content |------| Top/bottom fixed height stretched width
|------| |------|
|------| ^ |------|
|------| | |------|
| Left | <--stretch--> | Right|
|------| | |------|
|------| v |------|
|------| |------|
|--------------------------------|
| Bottom |
|--------------------------------|
Below is base code with no positioning for the divs. I've played with various position/absolute/relative etc but always get some weird overflow from top and bottom divs.
<body>
<style>
.container {
border: 3px solid #FF00FF;
width: 100%;
height: 100%;
}
.top {
background: red;
height: 3em;
width: 100%;
}
.bottom {
background: blue;
height: 3em;
bottom: 0;
}
.left {
background: green;
width: 5em;
}
.right {
background: gold;
width: 5em;
}
.content {
background: lightgreen;
height: 100%;
width: 100%;
}
</style>
<div class="container">
<div class="top">
Top
</div>
<div class="left">
Left
</div>
<div class="content">
Content
</div>
<div class="right">
Right
</div>
<div class="bottom">
Bottom
</div>
</div>
</body>
Most tell me not to create a page layout with tables but with divs and CSS. Cool - I can go with that. Sorry for a basic question.
I would like to have the center (content) stretch to left, right, top and bottom to the visible page. If the content grows beyond the visible page with the T,L,R,B divs, it can scroll. The left, right, top, bottom divs are fixed at their position in the visible page. Fiddling around, I can never get there.
Any suggestions on how to attack this?
|--------------------------------| <--- Visible page
| Top |
|--------------------------------| Right/left fixed with stretched height
|------| Center/content |------| Top/bottom fixed height stretched width
|------| |------|
|------| ^ |------|
|------| | |------|
| Left | <--stretch--> | Right|
|------| | |------|
|------| v |------|
|------| |------|
|--------------------------------|
| Bottom |
|--------------------------------|
Below is base code with no positioning for the divs. I've played with various position/absolute/relative etc but always get some weird overflow from top and bottom divs.
<body>
<style>
.container {
border: 3px solid #FF00FF;
width: 100%;
height: 100%;
}
.top {
background: red;
height: 3em;
width: 100%;
}
.bottom {
background: blue;
height: 3em;
bottom: 0;
}
.left {
background: green;
width: 5em;
}
.right {
background: gold;
width: 5em;
}
.content {
background: lightgreen;
height: 100%;
width: 100%;
}
</style>
<div class="container">
<div class="top">
Top
</div>
<div class="left">
Left
</div>
<div class="content">
Content
</div>
<div class="right">
Right
</div>
<div class="bottom">
Bottom
</div>
</div>
</body>
- hello you just need to position Left and Right div (Green ,and YEllow section) correct? – Pratik Joshi Commented Apr 19, 2014 at 17:11
2 Answers
Reset to default 5html, body {
height:100%;
}
.container {
position:relative;
width: 100%;
height: 100%;
}
.top {
height: 50px;
width: 100%;
background: red;
}
.left {
position:absolute;
top:50px;
left:0;
bottom:50px;
width: 50px;
background: green;
}
.right {
position:absolute;
top:50px;
right:0;
bottom:50px;
width: 50px;
background: gold;
}
.bottom {
position:absolute;
bottom:0;
width: 100%;
height: 50px;
background: blue;
}
.content {
position:absolute;
top:50px;
left:50px;
right:50px;
bottom:50px;
background: lightgreen;
overflow:scroll;
}
Something like this JSFiddle
side note: height in % won't work unless it's parent element has height set explicitly...
Use following
<html>
<head>
</head>
<body>
<body>
<style>
.container {
border: 3px solid #FF00FF;
width: 100%;
height: 100%;
}
.top {
background: red;
height: 3em;
width: 100%;
}
.bottom {
background: blue;
height: 3em;
bottom: 0;
width:100%;
float: left;
}
.left {
background: green;
width: 5em;
float:left;
height: 100%;
width: 10%;
}
.right {
background: gold;
width: 5em;
float:left;
height: 100%;
width: 10%;
}
.content {
background: lightgreen;
height: 100%;
width: 80%;
float:left;
}
html, body {
height:100%;
}
</style>
<div class="container">
<div class="top">
Top
</div>
<div class="left">
Left
</div>
<div class="content">
Content
</div>
<div class="right">
Right
</div>
<div class="bottom">
Bottom
</div>
</div>
</body>-</body>
</html>
fiddle http://fiddle.jshell/sgwKe/1/