there is a layout of such a plan

<div class="upper"></div> <div class="main"> <div class="column1"></div> <div class="column2"></div> </div> <div class="footer"></div>

How to make the footer pressed to the bottom in the absence of sufficient content in the columns and at the same time, naturally, when its wealth was shifted down?

NO, I DIDN'T FIND ANYTHING ON FLOOTS ON THEME. There are options for pressing, but floats are not used anywhere. and they are vital for me.

The answer "do not use float" is not accepted.

  • one
    at least write styles .. - sinedsem
  • there is nothing special there. from the required - all elements except column2 have float: left; (in the second column - float: right;) - Garfild

3 answers 3

In order for this to work with the doctype, i.e. in Standards Mode, it is necessary that the height specified in percent be for the elements along the chain, starting with html -> body, etc. Those. By default, the height in these elements is auto, which in your case makes it impossible to set it as a percentage for other elements. for the code above, without specifying this:

  html, body { height: 100%;}

You cannot set an element with a page-wrapper class to be 100% high.

  • In, thank you very much! I had a min-height instead of height in my body :) now everything seems to be ok) - Garfild

How to press the basement to the bottom of the page .

Elementary simply and perfectly works, I advise you to look at everyone who uses position

 <body> <div class="page-wrapper"> <div class="page-buffer"></div> </div> <div class="page-footer"> </div> </body>

Inside the .page-wrapper you can use float and stuff.

 html, body { height: 100%; margin: 0; padding: 0; } .page-wrapper { min-height: 100%; margin-bottom: -50px; } * html .page-wrapper { height: 100%; } .page-buffer { height: 50px; }
  • I can not understand why, but this method works only if you remove from the DOCTIPE o_O code with the doctype "vrapper" is considered empty, and captured by the float element as if it were not included. And, accordingly, with a negative indent, the whole site is shifted up. - Garfild

is there nothing useful?

  • There is no answer to my question. - Garfild
  • one
    @Garfild, @Dazar has already written to you in a comment that it would not hurt to show your styles. Or do we just need to guess? - Deonis