Forum Moderators: not2easy
these are sweet, but the problem is when you want to add a footer div (width: 100%) that displays at the bottom of the content. See, the footer div is placed at the bottom of the middle column content, but if your side columns are longer than the middle column, then the footer div will cover up the side columns -- i.e., the footer div sits at the bottom of the middle column, rather than at the bottom of the longest column.
Does anyone know a fix for this? It's driving me nuts, I've tried clear: both and float: none but of course these don't work as the columns aren't floated, they're absolutely positioned (well, except the middle column).
There really isn't any good way to acheive this. At least not that I've found.
The problem is that the left and right columns are positioned absolutely, so are effectively taken out of the normal flow of the page. This leaves you with no real idea wf where the 'bottom' is...
I find the best compromise to be putting the footer inside your center <div> with plenty of margin-top. Not idea, but it works...
Nick
I've tried (but not tested cross browser)..wrapping the entire page in a container div, then clearing this div with the div style clear..then adding footer width: 100%
It seems to work, but not tested extensively
Suzy
[edit] on initial test it only clears the center column, must have been all I needed at the time, sorry no answer [/edit]
It's a bit of a non-answer, but until the CSS specs come up with a solution (and the browsers catch up to support it) it's the best option outside using tables that I've found.
[w3.org...]
All I can say is: aaargh! I didn't know CSS layout has such powerful weaknesses :( I mean, I'm committed to table-less layout, but how can I get by without properly done footers? :(
<snip>no personal url's please</snip>
[edited by: Nick_W at 9:12 pm (utc) on Dec. 3, 2002]
I'm using the famous 3-column "holy grail" CSS layout as described here:
[glish.com...]
and here
[thenoodleincident.com...]
these are sweet, but the problem is when you want to add a footer div (width: 100%) that displays at the bottom of the content.
What about a nest of the footer inside the bottom of the center content area? A 100% width inside the footer division should fill the central parent holding division[content]
You could try color or border[s] on that footer division if you want it set off in any way?
---
You may be able to manipulate the 3 column Header and Footer CSS layout [realworldstyle.com] at Real World Style web site by Mark Newhouse. The layout is suppose to work with NN4, also. I am taking a look at those styles and modifying them for a different project.
holly
[edited by: Nick_W at 2:41 pm (utc) on Dec. 3, 2002]
And you want that footer to rest on the very bottom. My idea might only work if the center area is naturally longer than the side bar content.
If those side bar area widths are fixed you could possibly fix the footer content sides and have it appear after all other divsions, or set a pair of side margins on the footer to see if you can get the division to present in the space needed, and not overlap into the side column areas. A problem will happen on a small resize of the page on absolute placement and overlapping areas may not be avoidable. If relatively placed containers should resize though it may not look wonderful split into lines on a small browser view. There are always some sacrifices along the way.
holly
It blows up in Netscape 4 so other arrangements have to be made. My preferred solution is to make pages that look okay without styling and just feed the raw html to netscape 4 without a stylesheet.
That's ok for me to say because I'm making my own pages and don't have to please a client. Obviously, this is not an option for everyone.
My preferred solution is to make pages that look okay without styling and just feed the raw html to netscape 4 without a stylesheet.
My sites are created with CSS and XHTML- Both for clients and myself. I realize the risk I'm taking by excluding style for those with NN4, but at the same time, they still receive the information they came to look for. Some people feel that would be unacceptable.
When I started to make websites- people started messing about with complete CSS layouts- but always included a caveat. I guess I saw two ways to go about it- tables or css-- and after examining each, I felt it would be stifling to learn a complete toolset that is headed for obsolescence.
I realize the risk I'm taking by excluding style for those with NN4
I make liberal use of the @import workaround, so I can feed a basically proper, but not quite pretty, layout to NN4, etc., and then give the complete design to everyone else.
I think it's a better solution than just leaving NN4 with a big mess of unformatted text, and doesn't take TOO much more effort (as I'm definitely not aiming for perfection for NN4). :)
I agree with previous replies and if I were using this layout I would use an @import to pull a workable style sheet in for NN4x.
I was toying with a few experiments and it works fine across browsers - Opera5.01,Opera6.01,IE5.5, and Moz1.0RC when the content is shorter than both Menu bars. In all cases(except NN4x). Though Moz has an odd way of clearing sides when this is used.
Set borders for footer to
border: 0 none;
Set margin top to negative the box height, to try and move it up between the menu bars...
margin-top: -3.0em;
Add margin to bottom of Centre... to make sure footer box does not find its home inside that content box...
margin: 0 0.5em 3.0em 0;
And this will bring the footer up between those side bars when they are longer. Works fine in IE, and Opera versions on Win in all cases. Falls apart when content is longer in Moz1.0 than both side bar menus, and falls apart in Moz when the right menu bar is shorter, than content and left menu bar is longer than content. [sounds confusing but experimenting with the style, then viewing it in as many situations as you can will give you the idea what is happening.] I am guessing that Moz1.0 is similar to NN6 and NN7 in rendering, but need to re install those to double check.
Otherwise, if you know your content will be shorter than both side bars, this set of changes on Longhaired's CSS should work in all cases. Moz though seems to move the border or borderless box up without the contents, but it looks fine anyway. Make sure to not set the background to a color in the footer division, if you want the side bar menus to show. Or you can also set the background-color: transparent; and border: 0 none; in order to just have the footer text visible.
holly
[who is wondering if there is a quirk or another way to make sure that Moz and Newer NN versions work with this moved footer box.]
I thought it may be easier to see the changes with the complete CSS listing.
I was experimenting with moving the footer up into the page if possible, between side bars. [there are a few quirks in Moz1.0, tested on others fine, except for NN4x, where this layout will not work]Works in all cases where content is shorter than both Side bars. tested on Win OS.
changed lines are noted in bold, original styles are listed where it is commented.
body {
color: #000000;
background: #ffffff;
}
.header {
text-align: center;
border: 1px solid #ff0000;
margin: 0 0 10px 0;
}
.header h1 {
font-size: 3em;
margin: 0;
}
.left {
float: left;
width: 20%;
padding: 0;
border: 1px solid #00ff00;
margin: 0 0.5em 0.5em 0;
}
.centre {
float: left;
width: 58%;
padding: 0;
border: 1px solid #0000ff;
margin: 0 0.5em 3.0em 0;
} /* CHANGED margin: 0 0.5em 0.5em 0; increased
bottom box margin in case content is longer than side bars
so the raised footer does not end up in the center content
box */.right {
float: left;
width: 18%;
padding: 0;
border: 1px solid #f9ad00;
margin: 0 0.5em 0.5em 0;
}.footer {
clear: both;
height: 3.0em;
font-size: 0.8em;
text-align: center;
border: 0 none;
margin-top: -3.0em;
} /* CHANGED border from to none to turn it off where it
overlaps side bars(when or where it does) Added a -3.0em
top margin to move the footer box up into the page by
it's height - where this works*/
p {
margin: 0.5em 1em;
}
h1 {
margin: 0.2em 0.4em 0 0.4em;
}
h2 {
margin: 0 0.6em;
}
h3 {
margin: 0 0.8em;
}
Basic html for this page:
<body>
<div class="header">
<h1>3 column - header - footer</h1>
</div><div class="left">
<h2>group</h2>
Left content here.
</div>
<div class="centre">
<h2>centercontent</h2>
<p>
Center content here.
</p>
<br />
</div>
<div class="right">
<h2>right side</h2>
content for right side bar
</div>
<div class="footer">
footer content here
</div>
</body>
Now all we have to do is find a way to get the center conent first in the html flow. I'm stumped for sure ;)
Nick
Yes, as the ultimate "holy grail" adds seo to the mix. I'd like the spider to read (in div order) center, header, left, footer, right.
Most appreciated...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Floated Columns and Footer</title>
<style type="text/css" media="screen">body {
padding: 0;
margin: 0;
font: bold 14px/22px verdana, helvetica, sans-serif;
background-color: #fff;
color: #000;
height: 100%;
}#top {
margin: 0 0 0 0;
padding: 15px 0 3px 5px;
color: #333;
background-color: #fff;
height: 45px;
border-bottom: 1px solid #333;
}#content{
float: left;
margin: 5px 0 0 5px;
width: 64%;
border-right: 1px solid #333;
height: 100%;
}#menu {
margin: 0;
padding: 5px;
float: left;
width: 33%;
height: 100%
}#footer {
clear: both;
padding: 15px;
text-align: right;
border-top: 1px solid #333;
margin-top: 5px;
background-color: #fff;
color: #333;
}</style>
<body><div id="top"><h1>floated elements : footer</h1></div>
<div id="content">content</div>
<div id="menu">menu</div>
<div id="footer">footer</div></body>
</html>
