This question has already been answered:

There are 3 blocks:

.left-menu { background-color: #F4F4F4; min-height: 750px; width: 200px; float: left; } .center-main { width: 705px; float: left; margin-left: 10px; min-height: 750px; } .right-main { background-color: #F4F4F4; min-height: 750px; float: left; margin-left: 10px; width: 265px; } 
 <div class="left-menu" id="gmenu"></div> <div class="center-main" id="center"></div> <div class="right-main"><div>

How to make the height of the left and right blocks always be equal to the central unit?

Reported as a duplicate by the participants αλεχολυτ , Bald , Denis , user194374, aleksandr barakin 1 Sep '16 at 6:11 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

    3 answers 3

    But this is a classic case when tables come to the rescue:

     body { display: table; min-height: 750px; table-layout: fixed; width: 100%; } .left-menu { display: table-cell; background-color: #F4F4F4; width: 200px; } .center-main { display: table-cell; width: 705px; margin-left: 10px; } .right-main { display: table-cell; background-color: #F4F4F4; margin-left: 10px; width: 265px; } 
     <div class="left-menu" id="gmenu"></div> <div class="center-main" id="center"></div> <div class="right-main"><div>

      Example using display: table

      Can i use

       *{ box-sizing: border-box; } .container { display: table; width: 100%; table-layout: fixed; height: 50px; } .container > div { display: table-cell; vertical-align: top; padding: 15px; background: #ccc; } .container > div:nth-of-type(2) { background: #999; } 
       <div class="container"> <div class="left-menu"></div> <div class="center-main"></div> <div class="right-main">Здравствуйте, суть вопроса: есть ли инструкции по посадке уже свёрстанного сайта на хостинг? что бы там был охват, допустим: .htaccess robot.txt xmlrpc.php (сайт на wordpress) настройка гугл аналитики или яндекс метрики установка базовых плагинов (если есть необходимость) security например или защита от спама и тому подобное, спасибо.</div> </div>

      Example c using display: flex ;

      Can i use

       *{ box-sizing: border-box; } .container { display: flex; } .container > div { padding: 15px; background: #ccc; } .container > div:nth-of-type(1), .container > div:nth-of-type(3){ width: 25%; } .container > div:nth-of-type(2){ background: #999; width: 50%; } 
       <div class="container"> <div class="left-menu"></div> <div class="center-main"></div> <div class="right-main">Здравствуйте, суть вопроса: есть ли инструкции по посадке уже свёрстанного сайта на хостинг? что бы там был охват, допустим: .htaccess robot.txt xmlrpc.php (сайт на wordpress) настройка гугл аналитики или яндекс метрики установка базовых плагинов (если есть необходимость) security например или защита от спама и тому подобное, спасибо.</div> </div>

        As one of the implementation options for css, apply absolute to the side columns. In the example, other column widths for clarity.

         *, *:before, *:after { box-sizing: border-box; } body { font-size: .5rem; line-height: 1.5rem; font-family: sans-serif; color: #777; background: #ccc; } .wrap { max-width: 820px; width: 100%; margin: 0 auto; } .center { background: #fff; padding: 2rem; text-align: justify; } .left, .right { background: #eee; padding: 1rem; position: absolute; top: 0; bottom: 0; } .left { left: 0; width: 7rem; } .right { right: 0; width: 10rem; } .wrap_center { position: relative; padding: 0 10rem 0 7rem; } 
         <div class="wrap wrap_center"> <div class="left"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit, ab. </p> </div> <div class="center"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non reprehenderit quis numquam sit nobis quisquam voluptatum placeat explicabo ab deleniti, dolores cupiditate, ea voluptatibus magnam sunt incidunt praesentium? Maxime laborum minima voluptatum iusto, ex similique reprehenderit illo natus eos ipsa tenetur qui dolores veritatis quod praesentium aliquid architecto corporis iste molestiae temporibus necessitatibus eaque fuga excepturi provident? Dolorem provident architecto labore, doloribus in iste ab, rerum facere, amet incidunt sunt tempore inventore perferendis unde excepturi non. Aspernatur facilis, nemo, quia id ea similique placeat! Neque ipsam porro, ratione cumque! Suscipit doloremque magni cupiditate voluptas odio, optio architecto dolores necessitatibus modi. </p> </div> <div class="right"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta a eum assumenda, velit sunt quasi totam officia quas officiis aliquid.</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime mollitia expedita ipsa molestiae ad vel inventore sequi, praesentium est libero labore explicabo corporis ducimus tenetur fugiat delectus iusto alias, consequatur laudantium, vitae error voluptatem. Temporibus maxime ratione optio quibusdam eos, voluptatem quaerat. Error vero eius sit, dolores animi facilis laborum. </p> </div> </div>

        Another option is using flex for wrapping blocks.

         display: flex; justify-content: flex-start; align-items: stretch; align-content: stretch;

        In the example, other column widths for clarity.

         *, *:before, *:after { box-sizing: border-box; } body { font-size: .5rem; line-height: 1.5rem; font-family: sans-serif; color: #777; background: #ccc; } .wrap { max-width: 820px; width: 100%; margin: 0 auto; display: flex; justify-content: flex-start; align-items: stretch; align-content: stretch; } .center { background: #fff; padding: 2rem; text-align: justify; width: 20rem; } .left, .right { background: #eee; padding: 1rem; width: 10rem; } 
         <div class="wrap"> <div class="left"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit, ab. </p> </div> <div class="center"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non reprehenderit quis numquam sit nobis quisquam voluptatum placeat explicabo ab deleniti, dolores cupiditate, ea voluptatibus magnam sunt incidunt praesentium? Maxime laborum minima voluptatum iusto, ex similique reprehenderit illo natus eos ipsa tenetur qui dolores veritatis quod praesentium aliquid architecto corporis iste molestiae temporibus necessitatibus eaque fuga excepturi provident? Dolorem provident architecto labore, doloribus in iste ab, rerum facere, amet incidunt sunt tempore inventore perferendis unde excepturi non. Aspernatur facilis, nemo, quia id ea similique placeat! Neque ipsam porro, ratione cumque! Suscipit doloremque magni cupiditate voluptas odio, optio architecto dolores necessitatibus modi. </p> </div> <div class="right"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta a eum assumenda, velit sunt quasi totam officia quas officiis aliquid.</p> </div> </div>

        ...