Forum Moderators: not2easy
I am close to getting crazy - I cannot get a page to work like I want...
See here:
<snip>
What I want is:
- Width of the white part in the middle, the header and the footer shall be fixed to 743px.
- Width of the side bars (left and right) shall be variable - depending on the window width.
-> effect: the header, middle part and footer are kept centered.
How can I get this working without frames, but with DIVs only?!
Thx alot in advance for your advice!
Gerald
[edited by: swa66 at 10:29 pm (utc) on Oct. 26, 2009]
[edit reason] No links, please see ToS and Forum Charter [/edit]
My recommendation is to strip the HTML and CSS down to the problem itself by commenting out extraneous markup unrelated to the problem. If the fix is not found during this process, post the test ready code that replicates the problem and we will look at the options.
Be sure to declare a DTD and validate the markup. That will avoid, eliminate, or rule out many problems.
743px ... do you really need it to be odd ? Even is easier to think about. But odd can be done too.
Sounds like something for absolute positioning. Now don't try this in a retarded browser like IE6: it will need serious help to do this. So stick with a compliant browser for now, fix IE later.
The first thing we need to do when doing a full page in absolute positioning is to know what the minimum size of the paying field needs to be. Now if the side panel are just background the minimal width would be 743px. But if they have real content we need to allwo them some space. So let's assume 990px wide is the minimum we need to have a change of fittign in wha twe need inside.
height: let's assume the header and footer you mentioned need at least 100px each, and we need so space to put the bulk of it all, so let's assume 400px minimum.
We start from a basic html like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div class="side1">side1</div>
<div class="side2">side2</div>
<div class="middle">middle</div>
<div class="header">header</div>
<div class="footer">footer</div>
</body>
</html>
And then we create a 100% height on the body with the minimal dimensions we need.
html {
height: 100%;
}
body {
min-height: 400px;
height: 100%;
min-width: 990px;
position: relative;
}
Nitce the 100% height on the html: 100% height means to give it the same height as the parent has *IF* that parent ahs an explicitly set height different from auto. The exception is the root element that has the height of the viewport.
Try it and see the scrollbars if you resize it too small.
The position:relative is not there for show: it allows the body (which can now be bigger than the viewport!) to be the reference for our absolutely positioned children.
Next we use a little "trick": an absolutely position element can have it's 4 sides positioned (IE6 will choke on this, but there is a fix, later ...)
And margins can be used to move about the side, in both directions.
To create the left one we do:
.side1 {
position: absolute;
left: 0;
right: 50%;
top:0;
bottom:0;
background-color: red;
margin-right: 372px;
}
top and bottom will be set where the top and bottom of the body is.
The left side will be set on the left side of the body and the right side is the special one: it will first go to the middle of the body (the 50%) and then we will move it to the left with 372px (half the width+1 of your center column).
The other side is exactly the same but opposite. And without the extra +1 so we have the odd size on the middle portion.
.side2 {
position: absolute;
right: 0;
left: 50%;
top:0;
bottom:0;
background-color: orange;
margin-left: 371px;
}
So now we need to center the middle one.
I'm doing this a but a-traditional due to not wanting rounding errors
.middle {
position: absolute;
right: 50%;
left: 50%;
margin-right: -371px;
margin-left: -372px;
background-color: yellow;
top:100px;
bottom:100px;
}
Both left and right are set at the middle and them margins move them out (negative margins). The top and bottom leave room for the header and footer.
The header and footer now are easy: they need the same horizontal positioning as the middle part but they need a height and the top (resp bottom) needs to be set to 0.
Giving:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
html {
height: 100%;
}
body {
min-height: 400px;
height: 100%;
min-width: 990px;
position: relative;
}
.side1 {
position: absolute;
left: 0;
right: 50%;
top:0;
bottom:0;
background-color: red;
margin-right: 372px;
}
.side2 {
position: absolute;
right: 0;
left: 50%;
top:0;
bottom:0;
background-color: orange;
margin-left: 371px;
}
.middle, .header, .footer {
position: absolute;
right: 50%;
left: 50%;
margin-right: -371px;
margin-left: -372px;
}
.middle {
overflow: auto;
background-color: yellow;
top:100px;
bottom:100px;
}
.header {
overflow: auto;
background-color: green;
top:0px;
height: 100px;
}
.footer {
overflow: auto;
background-color: aqua;
height: 100px;
bottom:0;
}
</style>
</head>
<body>
<div class="side1">side1</div>
<div class="side2">side2</div>
<div class="middle">middle</div>
<div class="header">header</div>
<div class="footer">footer</div>
</body>
</html>
Note I added an overflow on the middle part: if it gets too much content that'll kick in. Depending on the content in the other boxes you might need to do the same there.
I didn't bother with testing it in IE. I know it'll break miserably in IE6: use IE7.js to fix that.
Now if you intended the side panels to be used as background, this is the completely wrong approach in my opinion: always start from your content, not from your background graphics or sliced images.
Thank you for your quick replies!
After some difficulties to post, here is the code of a sample page that shows, what I need to achive:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><style type="text/css">
body{
margin:0;
padding:100px 150px 50px 150px;
}
div#header{
background:lightgrey;
color:black;
position:absolute;
top:0;
left:150px;
right:150px;
height:100px;
}
div#right-sidebar{
background:#E2FEDE;
color:black;
position:absolute;
top:0;
right:0;
width:150px;
height:100%;
}
div#left-sidebar{
background:#E2FEDE;
color:black;
position:absolute;
top:0;
left:0;
width:150px;
height:100%;
}
div#footer{
background:lightgrey;
color:black;
position:absolute;
bottom:0;
left:150px;
right:150px;
height:50px;
}
@media screen{
body>div#header{
position:fixed;
}
body>div#left-sidebar{
position:fixed;
}
body>div#right-sidebar{
position:fixed;
}
body>div#footer{
position:fixed;
}
}
* html body{
overflow:hidden;
}
* html div#content{
height:100%;
overflow:auto;
}
</style>
<div id="header">
<p>Header shall be fixed in height and width.</p></div>
<div id="left-sidebar">
<p>Left border width shall be variable, depending on the window width.</p>
</div>
<div id="right-sidebar">
<p>Right border width shall be variable, depending on the window width.</p>
</div>
<div id="footer">
<p>Footer shall be fixed in height and width.</p>
</div>
<div id="content">
<p>Content area shall be fixed in height and width, but vertically scrollable by the browser scrollbar (as is).</p>
<p> </p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
</div>
Does anyone know, how I can make that?
Thanks in advance for any help!
Gerald
A friend of mine helped me out.
For your interest I post the working code.
Thanks for being prepared to help!
Gerald
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><style type="text/css">
body{
margin:0;
background:#E2FEDE;
}
div#header{
background:lightgrey;
color:black;
position:fixed;
top:0;
width:743px;
height:100px;
z-index:11;
}
div#footer{
background:lightgrey;
color:black;
position:fixed;
bottom:0;
width:743px;
height:50px;
z-index:10;
}
div#content{
background:white;
color:black;
padding-top:100px;
padding-bottom:50px;
margin: auto;
width:743px;
z-index:-5;
}
</style>
<div id="content">
<div id="header">
<p>Header shall be fixed in height and width.</p>
</div>
<p>Content area shall be fixed in height and width, but vertically scrollable by the browser scrollbar (as is).</p>
<p> </p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<p>Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled - Text to be scrolled</p>
<div id="footer">
<p>Footer shall be fixed in height and width.</p>
</div>
</div>
