https://jsfiddle.net/veetwmx0/

HTML :

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700" rel="stylesheet"> </head> <body> <div class="wrapper"> <div class="content" style="text-align:left"> <div style="padding: 70px; border: 1px solid;"> <h1>Заголовок</h1> </div> <div class="content_left" style="float:left; width:50%; border: 1px solid; height: 500px;padding:30px; box-sizing: border-box;"> <h1>Заголовок 2</h1> <p style="margin-top:20px;"> </div> <div class="content_right" style="float:left; width:50%; border: 1px solid;height: 500px; padding:30px; box-sizing: border-box;"> <h1 style="text-align:left; padding: 0;">Заголовок 3</h1> </div> </div> <div id="footer"> <ul class="ul_header"> <li><a href="index.html">Бла</a></li> <li><a href="index.html">Бла бла</a></li> </ul> </div> </div> </body> </html>

CSS :

 html, body{ background-color: #fff; width: 100%; height: 100%; margin: 0; padding: 0; font-family: 'Open Sans', 'Roboto', sans-serif; } h1 { margin: 0; padding: 20px; font-weight: 300; color:#8a98a5 } .wrapper { position: relative; min-height: 100%; } .ul_header{ margin:0; padding-left: 300px; float: left; } .ul_header li{ display: inline; /* Отображать как строчный элемент */ padding: 0 10px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .ul_header_right{ margin:0; float: right; } .ul_header_right li{ display: inline; /* Отображать как строчный элемент */ padding: 0 15px; } .ul_header_right div{ float:right; } .content{ width: 1085px; margin: 0 auto; text-align: center; padding-bottom: 60px; } #footer{ position: absolute; left: 0; bottom: 0; background-color: #f4f6f9; border-top: 1px solid #d8d8d8; width: 100%; font-size: 15px; font-weight: 400; height: 60px; line-height: 60px; } * {color:#a1afbd} p{ margin: 0; font-size: 14px; } .pa {margin-top: 15px !important;} h1 { font-size: 40px; padding: 0; }

Why is the footer not pressed to the bottom when using float: left?

2 answers 2

Because the footer with position: absolute positioned relative to the parent with position: relative . The closest is .wrapper .

And since overflow: hidden; not set for .content overflow: hidden; or clearfix , the floating blocks inside it fall out. The height of the wrapper is less than expected.

Just add clearfix to floating blocks:

 .content:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } 

 html, body{ background-color: #fff; width: 100%; height: 100%; margin: 0; padding: 0; font-family: 'Open Sans', 'Roboto', sans-serif; } h1 { margin: 0; padding: 20px; font-weight: 300; color:#8a98a5 } .wrapper { position: relative; min-height: 100%; } .content:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .ul_header{ margin:0; padding-left: 300px; float: left; } .ul_header li{ display: inline; /* Отображать как строчный элемент */ padding: 0 10px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .ul_header_right{ margin:0; float: right; } .ul_header_right li{ display: inline; /* Отображать как строчный элемент */ padding: 0 15px; } .ul_header_right div{ float:right; } .content{ width: 1085px; margin: 0 auto; text-align: center; padding-bottom: 60px; /* overflow: hidden; */ } #footer{ position: absolute; left: 0; right: 0; bottom: 0; background-color: #f4f6f9; border-top: 1px solid #d8d8d8; width: 100%; font-size: 15px; font-weight: 400; height: 60px; line-height: 60px; } * {color:#a1afbd} p{ margin: 0; font-size: 14px; } .pa {margin-top: 15px !important;} h1 { font-size: 40px; padding: 0; } 
 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700" rel="stylesheet"> </head> <body> <div class="wrapper"> <div class="content" style="text-align:left"> <div style="padding: 70px; border: 1px solid;"> <h1>Заголовок</h1> </div> <div class="content_left" style="float:left; width:50%; border: 1px solid; height: 500px;padding:30px; box-sizing: border-box;"> <h1>Заголовок 2</h1> <p style="margin-top:20px;"> </div> <div class="content_right" style="float:left; width:50%; border: 1px solid;height: 500px; padding:30px; box-sizing: border-box;"> <h1 style="text-align:left; padding: 0;">Заголовок 3</h1> </div> </div> <div id="footer"> <ul class="ul_header"> <li><a href="index.html">Бла</a></li> <li><a href="index.html">Бла бла</a></li> </ul> </div> </div> </body> </html>

The same applies if you want to put footer { float: left; } footer { float: left; } , not absolute positioning.

  • Thanks for the answer. What is the difference between overflow: hidden; or clearfix? overflow: hidden; works, why write clearfix which is much more? - GuitarFan
  • @GuitarFan, overflow: hidden; - will cut off all the content that will "vylazit" (does not fit). It happens to interfere. And clearfix will just clear the stream, but keep the structure. Yes, bulky, but it is better to use it. - HamSter
  • But after all, content has no fixed size, that is, it stretches when filled, it turns out to use overflow: hidden; is it allowed in this case? Or am I not taking into account something else? - GuitarFan
  • Can you say if I understand this clearfix correctly? content: "."; - display the point after the formation of the block. display: block; - to display a point (or what is around it?) as a block, I don’t know why, it is possible to use height height: 0; - remove height. clear: both; - This is probably the most important style to remove the ability to wrap an element on the sides, that is, an element with a float will be displayed only after the point and without a wrap? visibility: hidden; - I don’t know why, even without this, everything was already hidden, since the height was set to 0. - GuitarFan
  • one
    Read about clearfix and various options for cleaning up the stream. css-live.ru/tricks / ... xiper.net/collect/html-and-css-tricks/css-tricks/clearfix webformyself.com/… - HamSter

Because float does not apply to position: absolute; it would be better to write like this:

  #footer{ float: left; background-color: #f4f6f9; border-top: 1px solid #d8d8d8; width: 100%; font-size: 15px; font-weight: 400; height: 60px; line-height: 60px; }