Forum Moderators: not2easy
Using the html below, is it possible to do what I have in the title of this thread
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<link rel="stylesheet" type="text/css" href="my_Styles.css">
<meta name="Microsoft Theme" content="radial 1011, default">
</head>
<body>
<div class="header"></div>
<div class="left"></div>
<div class="centre"></div>
<div class ="right"></div>
<div class ="footer"></div>
</body>
</html>
[edited by: Xapti at 8:23 am (utc) on April 28, 2007]
for some reason min-width doesn't work for me
i set the footer and header for
width: 100%;
min-width: 500px;
overflow: auto;
it doesn't work
You'll have to use a 1x500 transparent spacer to make your min-width work. It'll have the exact same effect and work in all browsers.
I 'm just learning css an trying to apply it at the same time, thanks
[hms.harvard.edu...]
Now , I got a situation where I can force firefox to use the main scroll bar once the webpage gets to minimum acceptable size,
However, at that same point, IE still drops one of the columns instead of scrolling.
I am using a container to wrap, the header, 3 columns,and footer. This works for firefox, but not IE
Cheers
div.header {
width: 100%;
height: 15%;
text-align: left;
background:#FF0000;
}
div.Left {
vertical-align: Top;
min-width: 150;
width: 18%;
height: 80%;
float: left;
background:#33CCFF;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 8pt;
border-right: 1px solid #5e74b3;
}
div.centre {
width: 63.5%;
min-width: 500;
float: left;
height: 80%;
background: #2E00B8;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 8pt;
}
div.right {
vertical-align: Top;
min-width: 150;
width: 18%;
height: 80%;
float: right;
background: #B800F5;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 8pt;
border-left: 1px solid #5e74b3;
}
div.footer {
min-width: 900px;
overflow: auto;
width: 100%;
height: 5%;
bottom:0;
clear:both;
text-align: center;
border-top: 1px solid #E0E0E0;
padding: 3px 0 0 0;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 8pt;
background:#3D3D3D;
height: 20px;
}
div.container {
position: relative; /* This will help us position contained divs */
/* width: 100%; Removed - This is default behaviour */
/* height: 100%; Removed - This will refer to total height of <body>, so your footer will always be pushed off the bottom */
/* As your left, centre and right are 80%, this will leave a 20% gap! */
overflow: auto; /* Added to contain floated children */
}div.header {
width: 100%; /* Default behaviour */
height: 15%;
text-align: left;
background:#FF0000;
}div.Left {
/* vertical-align: Top; Removed - vertical-align won't work, also top is default */
min-width: 150; /* 150 what? px? Unit must be specified */
width: 18%;
height: 80%; /* This is unadvisable, look up faux columns */
float: left;
background:#33CCFF;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 8pt;
border-right: 1px solid #5e74b3;
}div.centre {
width: 63.5%;
min-width: 500; /* 500 what? px? Unit must be specified */
/* float: left; Removed */
margin: 0 auto; /* This will centre div */
height: 80%; /* This is unadvisable, look up faux columns */
background: #2E00B8;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 8pt;
}div.right {
/* vertical-align: Top; Removed - vertical-align won't work, also top is default */
min-width: 150; /* 150 what? px? Unit must be specified */
width: 18%;
height: 80%; /* This won't work, look up faux columns */
float: right;
background: #B800F5;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 8pt;
border-left: 1px solid #5e74b3;
}div.footer {
min-width: 900px;
overflow: auto;
/* width: 100%; Removed - This is default behaviour */
height: 5%; /* And 20px? Make your mind up! */
bottom: 0;
/* clear:both; Removed - unnecessary, as this will fall below div.container regardless */
text-align: center;
border-top: 1px solid #E0E0E0;
padding: 3px 0 0 0;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 8pt;
background:#3D3D3D;
height: 20px; /* And 5%? Make your mind up! */
}
ok, I think that's all for now, should slim it down a bit! The secret to CSS is keep it simple, by removing all the unneccesary stuff it's much easier to see what you've got.
Since your original HTML example didn't include div.container, I assume you now have this, or should have....
<div class="header"></div>
<div class="container">
...<div class="left"></div>
...<div class ="right"></div>
...<div class="centre"></div>
</div>
<div class ="footer"></div>
Now, what we've done, apart from removing the surplus, we've made container actually contain, by adding position relative and overflow auto. Left is pretty much unchanged. Instead of floating centre to center it, we've now used margin 0 auto to center it within left and right. Right again is almost unchanged.
Note in the HTML, I've moved right before centre, this was not a typo! As left and right are floated, we need them in this order, that way centre will float between them. If it was left centre right, the right would float right of centre, while there was enough space, then drop when the window shrank. I think this was your problem.
Try that and lets see how you get on.
The footer is not pushed of the bottom of the page, tis bizzare lookin as the content of the columns push right tthru the footer
On div.container you should have overflow: auto, I think you may also need to specify a width for this to work so add width 100% back in.
Thing is when I follow your instructions exactly, the center pushes down the right hand div, so I reinstate float left,
Then when I use overflow on the container + 100 width
the container contains its children, but does not stretch, an I have ugly, un familiar scroll bars in the middle of the page, so the children scroll up into the header, or down into the footer, in the middle of the page.
What i want to achieve:
fixed height, fixed width header & footer
fixed width , stretchy lenght sidebars, left & right
stretch width, stretchy lenght center
I have achieved this in IE6 an probably IE7
The problem is Firefox
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>Test Page</title><style>
HTML, BODY { margin: 0; height: 100%; overflow: auto; }
BODY {
width: expression( Math.max( document.body.offsetWidth, 800) +"px");
min-width: 800px;
overflow: visible;
}#header {
height: 10%;
background: #F00;
}#container {
position: relative; /* This will help us position contained divs */
width: expression( Math.max( document.body.offsetWidth, 800) +"px");
min-width: 800px;
height: 79%; /* Reduced to compensate for extra heights */
overflow: auto; /* Added to contain floated children */
}#left {
float: left;
width: 18%; min-width: 100px;
height: 100%; /* Still unadvisable - see faux columns */
background:cyan;
border-right: 1px solid #5e74b3; /* This will be added on to width */
}#centre {
width: 63%; /* Narrowed slightly to compensate for extra widths */
min-width: 500px;
height: 100%; /* Still unadvisable - see faux columns */
margin: 0 auto; /* This will centre div */
background: #2E00B8;
color: white;
}#right {
float: right;
width: 18%; min-width: 150px;
height: 100%; /* Still unadvisable - see faux columns */
background: #B800F5;
border-left: 1px solid #5e74b3; /* This will be added on to width */
}#footer {
min-width: 900px;
overflow: auto;
height: 10%;
text-align: center;
border-top: 1px solid #E0E0E0; /* This will be added on to height */
padding-top: 3px; /* This will be added on to height */
background:#3D3D3D;
}</style>
</head>
<body>
<div id="header">Header</div>
<div id="container">
<div id="left"> Left side<br><img width='150' height='1' src='spacer.gif'></div>
<div id ="right"> Right side<br><img width='150' height='1' src='spacer.gif'></div>
<div id="centre"> Main content<br><img width='495' height='1' src='spacer.gif'></div>
</div><div id="footer">Footer<br><img width='900' height='1' src='spacer.gif'></div>
</body>
</html>
Had to set the minimum width on container to stop the floated columns wrapping, but works ok. Had to narrow widths/heights slightly to make up for borders/padding, etc....
Also had to narrow spacer on main content slightly - due to narrowed widths you don't quite get the total 500px in the centre.
You actually don't need the spacers this way.
On container I've done this:
width: expression( (document.body.offsetWidth > 800? document.body.offsetWidth: 800) +"px");
min-width: 800px;
Only IE understands the expression, that line sets the width to the total width, or 800, whichever is greater. Also I've change the body to match, this will make sure the header and footer match the width of the content. The only problem with the expression thing is that it only works on page load, but I don't worry about this too much.
FF ignores the expression bit but notices the min-width instead, so same effect.
thanks for the code, however, if I type in a list that is taller than the centre(uses more rows), it fails, the center drops below the side bars
Without the none css code , I already have a page functioning just fine in IE6, tis only firefox thats an issue
I suspect what I am try to achieve ought to be common,
However, I have been reading about troublesome footers , particularly in none IE browsers
Thanks
