fidle: https://jsfiddle.net/uhscokco/

I understand that something is not right, I tried divas with left-menu classes, main to do with float, clear: both, and without float with overflow eventually cuts the table. And in the end, it is necessary that both these divas stretch quietly if the table grows.

<header> <div class="logo"></div> <div class="right"></div> <br style="clear: both"> </header> <div class="content"> <div class="leftMenu"></div> <div class="main"> <div class="hotSpots"> <div class="block1"> <div class="icons">icon</div> <div class="table"> <table> <tr> <td>1</td> <td>name</td> <td>locations</td> <td>shares</td> <td>social</td> <td>redirect</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> </table> </div> </div> </div> </div>

  • What div are we talking about? about vertical or horizontal? - Vadim Ovchinnikov

1 answer 1

I do not know whether it is necessary or not, but ...

 .clear, .clear:after { content: ""; display: block; clear: both; } html, body { height: 100%; width: 100%; margin: 0; padding: 0; } p { margin: 0; padding: 0; } header { height: 100px; } header .logo { float: left; background-color: blue; width: 100px; height: 100%; } header .right { float: left; width: calc(100% - 100px); height: 100%; background-color: red; } .content { width: 100%; height: 100%; } .content .main { width: calc(100% - 104px); height: 100%; display: inline-block; vertical-align: top; } .content .leftMenu { width: 100px; height: 100%; display: inline-block; background-color: #5bc0de; } .hotSpots { width: 100%; background-color: aqua; } .hotSpots .block1 { padding: 30px 50px 50px 50px; } .hotSpots .table { margin: 0 auto; } .hotSpots table { width: 100%; border-collapse: collapse; } .hotSpots table tr:first-child { background-color: darkgrey; } .hotSpots table, .hotSpots th, .hotSpots td { border: 1px solid black; } 
 <header> <div class="logo"></div> <div class="right"></div> </header> <div class="clear" /> <div class="content"> <div class="leftMenu"></div> <div class="main"> <div class="hotSpots"> <div class="block1"> <div class="icons">icon</div> <div class="table"> <table> <tr> <td>1</td> <td>name</td> <td>locations</td> <td>shares</td> <td>social</td> <td>redirect</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> </table> </div> </div> </div> </div> </div>

  • where did my div with class left-menu go - unrealisted
  • @unrealisted I just copied your html and everything, I didn’t remove anything - user33274