homepage Welcome to WebmasterWorld Guest from 184.73.104.82
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
how to put footer in a 3-column "holy grail" CSS layout
footer covers up the side bars :(
indiechild

10+ Year Member



 
Msg#: 424 posted 11:55 pm on Dec 2, 2002 (gmt 0)

OK I'm using the famous 3-column "holy grail" CSS layout as described here:
[glish.com...]
and here
basic3_touch.html [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. 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).

 

Nick_W

WebmasterWorld Senior Member nick_w us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 424 posted 7:29 am on Dec 3, 2002 (gmt 0)

Hi Indiechild

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

SuzyUK

WebmasterWorld Senior Member suzyuk us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 424 posted 7:59 am on Dec 3, 2002 (gmt 0)

Hi Indie

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]

mivox

WebmasterWorld Senior Member mivox us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 424 posted 8:11 am on Dec 3, 2002 (gmt 0)

I generally pick a side column in which to include my footer div material... maybe put your copyright info at the bottom of the right-most div, your contact info at the bottom of the left-most div, and any footer text links at the bottom of the center div.

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.

edit_g

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 424 posted 11:33 am on Dec 3, 2002 (gmt 0)

The CSS3 roadmap specifies footers as something to be added... So only another 3 or 4 years to wait then, until 75% of browsers support it...

[w3.org...]

indiechild

10+ Year Member



 
Msg#: 424 posted 1:00 pm on Dec 3, 2002 (gmt 0)

thanks for the feedback everyone.

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? :(

Longhaired Genius

10+ Year Member



 
Msg#: 424 posted 1:54 pm on Dec 3, 2002 (gmt 0)

Three-columns-and-a-footer layout is quite possible if one is willing to give up some imagined "control" and use "float" to position one's boxes and "clear: both" for the footer.

<snip>no personal url's please</snip>

[edited by: Nick_W at 9:12 pm (utc) on Dec. 3, 2002]

holly

10+ Year Member



 
Msg#: 424 posted 2:38 pm on Dec 3, 2002 (gmt 0)

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]

holly

10+ Year Member



 
Msg#: 424 posted 2:48 pm on Dec 3, 2002 (gmt 0)

OTOH if the side columns are longer than the content, I can see the problem, now. hmm.

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

madcat

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 424 posted 6:11 pm on Dec 3, 2002 (gmt 0)

That looks like the answer Longhaired_Genius :: I wonder how this hold up across browsers? I have a very limited testing area.

Longhaired Genius

10+ Year Member



 
Msg#: 424 posted 6:24 pm on Dec 3, 2002 (gmt 0)

madcat,

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.

madcat

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 424 posted 8:07 pm on Dec 3, 2002 (gmt 0)

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.

mivox

WebmasterWorld Senior Member mivox us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 424 posted 8:29 pm on Dec 3, 2002 (gmt 0)

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). :)

madcat

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 424 posted 8:34 pm on Dec 3, 2002 (gmt 0)

good point mivox- it's easier to shrug your shoulders at NN4 but it pays to provide it with some attention.

holly

10+ Year Member



 
Msg#: 424 posted 9:05 pm on Dec 3, 2002 (gmt 0)

Nice Layout - Longhaired. It is clean and it is very flexible or fluid]

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.]

holly

10+ Year Member



 
Msg#: 424 posted 11:03 pm on Dec 3, 2002 (gmt 0)

Modified from Longhaired's CSS ... which is very good.

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>

Nick_W

WebmasterWorld Senior Member nick_w us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 424 posted 11:06 pm on Dec 3, 2002 (gmt 0)

Fantastic! Cheers Holly, and thanks to longhairedgenius for letting us play with his code ;)

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

rcjordan

WebmasterWorld Senior Member rcjordan us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 424 posted 1:22 am on Dec 4, 2002 (gmt 0)

>Now all we have to do is find a way to get the center conent first in the html flow

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.

Nick_W

WebmasterWorld Senior Member nick_w us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 424 posted 6:51 am on Dec 4, 2002 (gmt 0)

Best way to do that is a fixed position 3 column layout [webmasterworld.com] RC...

Nick

madcat

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 424 posted 12:30 am on Jan 2, 2003 (gmt 0)

I was looking for the URL Longhaired Genius had posted in message #7. Could you sticky me that sample code LG if you still have it?

Most appreciated...

madcat

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 424 posted 1:30 am on Jan 2, 2003 (gmt 0)

One more adaptation -- Two floated columns and a cleared footer.
-------------------------------------------------------------------------------
<!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>


-------------------------------------------------------------------------------
Tested on IE 6, Opera 6.05, Mozilla and Netscape 7.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved