Footer I want to expand it using the height property. Does not work.

left menu and content are left and right FLOAT, respectively.

What is the reason why the footer is not visible or expanding?

.container { position: relative; height: 2000px; margin: 0px auto; min-height: 100%; } .header { width: 100%; border: 4px; background: palegreen; height: 150px; } .left-menu { width: 30%; border: 4px; background: aqua; float: left; height: 300px; } .content { width: 70%; border: 4px; background: teal; float: right; height: 300px; } .footer { width: 100%; height: 150px; border: 4px; background: palegreen; } 
 <body> <div class="container"> <div class="header">HEADER</div> <div class="left-menu">MENU</div> <div class="content">CONTENT</div> <div class="footer">FOOTER</div> </div> </body>

  • What caused the use of float? Why not flex? - Hikikomori
  • float is a classic layout. should work with skillful use. - Dmitry Nikitin
  • Tables are also classic, this does not mean that they should be used. - Hikikomori pm

1 answer 1

  .container { position: relative; margin: 0px auto; } .header { width: 100%; border: 4px; background: palegreen; height: 150px; } .left-menu { width: 30%; border: 4px; background: aqua; float: left; height: 300px; } .content { width: 70%; border: 4px; background: teal; float: right; height: 300px; } .footer { width: 100%; height: 150px; border: 4px; background: palegreen; clear: both; } 
 <body> <div class="container"> <div class="header">HEADER</div> <div class="left-menu">MENU</div> <div class="content">CONTENT</div> <div class="footer">FOOTER</div> </div> </body>

  • clear: both - how to explain the mechanics of action? - Dmitry Nikitin
  • @Dmitry Nikitin cancels block wrap from certain sides - htmlbook.ru/css/clear - midia
  • how did (where?) the wrapping pass, that the footer (until clear: both) disappeared completely? - Dmitry Nikitin