Hello, dear community!

There is a problem on the site with a “basement”. The necessary block does not want to be rigidly attached everywhere to the bottom of the page so that it would not overlap the main block with content. On IE it works, in others it is tied to the screen resolution. Here is the style code:

footer {position:relative; height:40; bottom:-40; padding-bottom:50; padding-left:127; text-decoration:none; list-style:none;} footer ul {list-style:none;} footer A:link {color:gainsboro; display:inherit; text-decoration: none;} footer A:visited {color:gainsboro; display:inherit; text-decoration: none;} footer A:hover {color:orange; display:inherit; text-decoration: none;}

Here is the listing

 <body style="//text-decoration:none;"> <div id="header"><img src="../img/header2.png"> </div> <div class="info"> <ul class="h"> <li style="margin-left:30px; //margin-left:50px; padding-top:0;"> content </li> </ul> <ul> <li class="text" style="text-align:justify; "> content2 </li> </ul> </div> <?php include "inc/menu.php"; ?> <div id="banner"></div> <div id="footer"> <ul> <li><font color="gainsboro" size="5"> | <font color="gainsboro" size="2"><font color="gainsboro" size="5"> | </font> 2010-2012<font color="gainsboro" size="5"> | </font> </li> </ul> </div> </body>
  • I can be mistaken, but it seems better to indicate the position in the Absolute for the footer :) - Stanislav Komar
  • and what will happen to your absolutely positioned footer, if, say, to change the screen resolution? .... or, if the screen's grain is different?))) - LeD4eG
  • So wrong! - Palmervan
  • It is necessary to give not CSS and HTML - CSS conditionally given HTML will write, a minute of work! - Palmervan
  • in which of two points? - LeD4eG

3 answers 3

 #all-but-footer { height: 100%; width: 100%; } #all-but-footer #inner { margin-bottom: 40px; } #footer { height: 40px; margin-top: -40px; }

Well, that's right. Look at the code above: it assumes something like this:

 <div id="all-but-footer"><!-- это блок, который всегда на весь экран --> <div id="inner"> <div id="header"></div> <div id="menu"></div> <!-- и так далее, весь контент здесь --> </div><!-- здесь 40px для футера --> </div> <div id="footer"> <!-- а здесь футер, который благодаря margin-top == -height накладывается на предыдущий блок --> </div>
  • did not help, got up as if dug after absolute blocks, and in my center is relative - bros575
  • @bros575, once got up, rooted to the spot, can significantly change the scale of the page and see what you get. but, if you have the phrase “in the center” as a container that contains all the content of the page (and the footer is also there), then you need to understand what position: relative means and absolute positioning really could help. - LeD4eG
  • There may still be a known glitch with height. With different doctypes, the total height is recorded either as 'height: 100%;' or 'min-height: 100%: height: auto;' or 'min-height: 100%; height: 100%;' 'min-height: 100%; height: 100%;' . That is, in your case, the main unit may not stretch to the full height. It would be more time - I would have thrown modelka. Try it yourself - create an empty html with a bunch of content, put 'border: #0f0 1px solid;' blocks and play with height. How come - transfer. Yes, keep in mind that padding affects height (you have a 90px footer). - Sh4dow
  • @ Sh4dow on my opinion wrong html markup, for which the vehicle had to put html. - Palmervan
  • Updated the answer - Sh4dow

Read this: How to press the footer (basement) to the bottom . I think it will help. Just read carefully. There is a method number 2 (solution with absolute positioning). I like it more.

  • Hmm, but I did not write the same?) But in general, yes, there is a demo there, it's good. - Sh4dow
  • Thank you all for your assistance! coped, added spacer. Article that is necessary! - bros575
 footer { z-index: -9000 }