Log in or Sign up

Advertising
y u no do it?

Advertising (learn more)
Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

Starts at just $1 per CPM or $0.10 per CPC.

Footer problem with CSS

Discussion in 'CSS' started by I. Brian, Oct 4, 2005.

I. Brian Business consultant

Messages:

810

Likes Received:

59

Best Answers:

1

Trophy Points:

145
#1
I'm trying to get my site entirely CSS-driven, but I'm having problems with a footer section that won't stay at the foot of page.

For example:

platinax.co.uk/news/2005/09/27/intel-and-microsoft-to-support-hd-dvd/

Current footer CSS values:

.footer { background: url(../images/bg_footer.gif) left repeat-x; height: 118px; width: 100%; text-align: center; padding-top: 22px; }

Code (markup):

Any suggestions on how to get the footer behaving much appreciated - a working code replacement gets $20 via Paypal.
I. Brian, Oct 4, 2005 IP
exam Peon

Messages:

2,434

Likes Received:

120

Best Answers:

0

Trophy Points:

0

#2

From experts exchange. I'll paste here so you don't have to sign up to see it. the question was:

All I want to do is tell CSS where to put something inside of a div. Either the top, the middle, or the bottom.

As far as I can tell, this is IMPOSSIBLE.

vertical-align does ABSOLUTELY NOTHING.

<div style="height: 100px">
<span style="vertical-align: bottom">THIS DOESNT WORK</span>
</div>

Thank you anyone who can show me that CSS isn't worse than tables.

-Sam
Click to expand...

And the answer Hope it helps.

Hi samsonite1023,

Well, CSS defines the vertical-align property only for inline and table-cell elements. Unfortunately, it's useless setting a height for inline elements like <span>, we can use something like this:

<div style="display:table;">
<div style="height:100px;display:table-cell;vertical-align:bottom;">
Testing
</div>
</div>

Unfortunately, IE, still the most used browser, completely ignores this...

For IE, there is a hack that can be used, but the width needs to be set manually. We can try something like:

<html>
<head>
<title>Testing Bottom Alignment</title>
<style type="text/css">

.bottom {
position: absolute;
height: 100px;
border: 1px solid black;
width: 100%;
}

.bottom[class] {
position: static;
width: auto;
height: auto;
display: table;
}

.bottomnested {
position: absolute;
bottom: 0px;
}

.bottomnested[class] {
position: static;
display: table-cell;
vertical-align: bottom;
height: 100px;
}

</style>
</head>
<body>
<div class="bottom">
<div class="bottomnested">
Testing
</div>
</div>
</body>
</html>

Regards,
Zyloch

Comment from Zyloch
Date: 08/27/2005 05:54PM PDT
Comment

Looking further, if you do not need a special background for the main div container, and just need the text at the bottom, for IE, you can take away the width: 100% in .bottom style. However, you must also take away the border: 1px solid black; otherwise people can clearly see that there was a hack done.

Regards...
Click to expand...

exam, Oct 4, 2005 IP

I, Brian likes this.
Skeleton Peon

Messages:

116

Likes Received:

10

Best Answers:

0

Trophy Points:

0

#3

I think you have used very much absolute-positioning in the layout. For that kind of layout, floats will better fit IMO. Please check the following pages. You will probably need to change your DIVs hierarchy a little (for ex. taking the footer div to one upper level, etc.)

http://www.stopdesign.com/log/2005/07/27/still-throwing-tables.html
http://stopdesign.com/present/2004/ddw-seattle/tables/

Check html and css source for floats:
http://stopdesign.com/examples/ms/

Hope this helps.

Skeleton, Oct 4, 2005 IP

I, Brian likes this.
I. Brian Business consultant

Messages:

810

Likes Received:

59

Best Answers:

1

Trophy Points:

145

#4

I've tried playing with floats instead of absolutes, and also changing the div order - I just can't get the page to behave properly.

I. Brian, Oct 5, 2005 IP
chachi The other Jason

Messages:

1,600

Likes Received:

57

Best Answers:

0

Trophy Points:

0

#5

Just took a quick peek at it. Looks like you have a closing div right after your footer...what div is the footer enclosed in? Seems like the way you have things set up you want your footer div below any other divs as you are not using a container div that I could see.

BTW, there are some drop in three column css layouts like this one that should take care of all of your problems. Looks like you can drop in all of your stuff into that one including your menus.

chachi, Oct 5, 2005 IP

I, Brian likes this.
Amos Peon

Messages:

224

Likes Received:

3

Best Answers:

0

Trophy Points:

0

#6

I belive you need to use the clear command in order for it to stay at the bottom.

Amos, Oct 5, 2005 IP
I. Brian Business consultant

Messages:

810

Likes Received:

59

Best Answers:

1

Trophy Points:

145

#7

Thanks for the advice, folks - looks like overall the problem is due to absolute values for position for the left, center, and right content, and that this won't allow the footer to be controlled, even with clear commands.

I think I'll probably need a new CSS template...

I. Brian, Oct 5, 2005 IP
exam Peon

Messages:

2,434

Likes Received:

120

Best Answers:

0

Trophy Points:

0

#8

I said:

I think I'll probably need a new CSS template...
Click to expand...

I think the example tutorial that chachi posted should do the job

exam, Oct 5, 2005 IP

(You must log in or sign up to reply here.)