Illogical HTML and CSS inheritance?

Question

I have a footer table which always has to stay at the bottom. In order to achieve this I have made a div with a class wrapper. wrappers height and width are 100%. The footer is not inside the wrapper so it is always at the bottom. By giving the wrapper a margin bottom of -150px I pull the footer up. However when you re size the page it becomes evident that the the table inside wrapper inherited the margin bottom -150px which is strange. If I do set margin bottom 150px for the table it stops working in safari and chrome.

Here is the site: http://canmill.zxq.net

Help is greatly appreciated

I'm having a hard time seeing what the problem is. On Chrome 13/Windows 7, it doesn't look like any new margins are introduced anywhere. Can you post before/after images? — sdleihssirhc
– sdleihssirhc, Commented Aug 31, 2011 at 19:37
The problem is there. Just turns out I uploaded wrong file. But now its the correct one and its buggy — Tom
– Tom, Commented Aug 31, 2011 at 19:38
give the wrapper a padding-bottom of 1px. That should prevent margin-collapse. — Gerben
– Gerben, Commented Aug 31, 2011 at 19:42

ShaneC · Accepted Answer · 2011-08-31 19:48:17Z

1

There's a few design choices (specifically your wrapping divs) which have contributed to the problem. The code provided on this page should help you correct it: http://www.cssstickyfooter.com/using-sticky-footer-code.html

answered Aug 31, 2011 at 19:48

ShaneC

2,4164 gold badges20 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tom Over a year ago

Very helpful link thanks, If I had seen something like this before making the site it would have been very helpful +1 for that

ShaneC Over a year ago

Adapting your site to use this format wouldn't be too difficult, though. From the looks of it your header and footer are a static height and your content is a variable height. So just adapt your layout to the "Sticky Footer" layout by putting your header in the top of the #wrap block, your content in the #main block, and your footer in the #footer block.

Tom Over a year ago

That is in fact what I'm currently doing :)

buritos · Accepted Answer · 2011-08-31 19:54:52Z

1

try

.wrapper {
  padding: 0 0 200px 0;
}

.footer {
  margin-top: 0px;
  background: url(images/bottombg.jpg) repeat-x;
  position: fixed;
  bottom: 0px;
}

answered Aug 31, 2011 at 19:54

buritos

5962 silver badges9 bronze badges

Collectives™ on Stack Overflow

Illogical HTML and CSS inheritance?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related