It is necessary to arrange the blocks in this way: enter image description here

But I don’t know how to do it right. Take 2 parent blocks of 50% each and place them in them, or can it be somehow different?

That's what I get without parent units.

.contbody { float: left; margin-left: 1%; width: 100%; } .contbody h4 { color: #4a275c; font-size: 18px; font-weight: 700; } .txtbody { float: left; width: 48%; margin-right: 2%; } .txtbody p { font-size: 14px; font-weight: 400; color: #090213; } .txtbody p { padding-left: 20px; position: relative; } .txtbody p:before { content: "\2714"; background-repeat: no-repeat; display: block; position: absolute; left: 0; top: 0px; } 
 <div class="contbody"> <h4>Общие параметры линейки :</h4> <div class="txtbody"> <p>Интегрированная компрессорная станция с адсорбционным осушителем и грамотной системой управления и диагностики представляет собой абсолютно новый стандарт качества производства сжатого воздуха.</p> </div> <div class="txtbody"> <p>Диагностика и управление эксплуатационными режимами для увеличения эффективности и увеличения срока службы.</p> </div> <div class="txtbody"> <p>В результате удобной установки деталей в общем корпусе была создана интегрированная компоновка компрессорной станции, легко подключаемой к потребителям воздуха.</p> </div> <div class="txtbody"> <p>Современные и высокоэффективные компоненты (новый блок 5-го поколения A150).</p> </div> </div>

Is it possible in my case to align them as in the picture?

    2 answers 2

    perhaps only, the parent of the col type will help:

    Example:

     * { box-sizing: border-box; } .contbody { float: left; margin-left: 1%; width: 100%; } .contbody h4 { color: #4a275c; font-size: 18px; font-weight: 700; } .col { width: 48%; margin-right: 2%; float: left; } .txtbody p { font-size: 14px; font-weight: 400; color: #090213; } .txtbody p { padding-left: 20px; position: relative; } .txtbody p:before { content: "\2714"; background-repeat: no-repeat; display: block; position: absolute; left: 0; top: 0px; } .col:nth-of-type(2n+1){ clear: both; } 
     <div class="contbody"> <h4>Общие параметры линейки :</h4> <div class="col"> <div class="txtbody"> <p>Интегрированная компрессорная станция с адсорбционным осушителем и грамотной системой управления и диагностики представляет собой абсолютно новый стандарт качества производства сжатого воздуха.</p> </div> <div class="txtbody"> <p>Диагностика и управление эксплуатационными режимами для увеличения эффективности и увеличения срока службы.</p> </div> </div> <div class="col"> <div class="txtbody"> <p>Диагностика и управление эксплуатационными режимами для увеличения эффективности и увеличения срока службы.</p> </div> <div class="txtbody"> <p>В результате удобной установки деталей в общем корпусе была создана интегрированная компоновка компрессорной станции, легко подключаемой к потребителям воздуха.</p> </div> <div class="txtbody"> <p>Современные и высокоэффективные компоненты (новый блок 5-го поколения A150).</p> </div> </div> </div>

    Another option with inline-block :

     * { box-sizing: border-box; } .contbody { float: left; margin-left: 1%; width: 100%; } .contbody h4 { color: #4a275c; font-size: 18px; font-weight: 700; flex: 1 100%; } .col { width: 47%; display: inline-block; vertical-align: top; margin-right: 2%; } .txtbody p { font-size: 14px; font-weight: 400; color: #090213; } .txtbody p { padding-left: 20px; position: relative; } .txtbody p:before { content: "\2714"; background-repeat: no-repeat; display: block; position: absolute; left: 0; top: 0px; } 
     <div class="contbody"> <h4>Общие параметры линейки :</h4> <div class="col"> <div class="txtbody"> <p>Интегрированная компрессорная станция с адсорбционным осушителем и грамотной системой управления и диагностики представляет собой абсолютно новый стандарт качества производства сжатого воздуха.</p> </div> <div class="txtbody"> <p>Диагностика и управление эксплуатационными режимами для увеличения эффективности и увеличения срока службы.</p> </div> </div> <div class="col"> <div class="txtbody"> <p>Диагностика и управление эксплуатационными режимами для увеличения эффективности и увеличения срока службы.</p> </div> <div class="txtbody"> <p>В результате удобной установки деталей в общем корпусе была создана интегрированная компоновка компрессорной станции, легко подключаемой к потребителям воздуха.</p> </div> <div class="txtbody"> <p>Современные и высокоэффективные компоненты (новый блок 5-го поколения A150).</p> </div> </div> </div>

    Option with flex :

     * { box-sizing: border-box; } .contbody { float: left; margin-left: 1%; width: 100%; display: flex; flex-flow: row wrap; } .contbody h4 { color: #4a275c; font-size: 18px; font-weight: 700; flex: 1 100%; } .col { width: 47%; margin-right: 2%; } .txtbody p { font-size: 14px; font-weight: 400; color: #090213; } .txtbody p { padding-left: 20px; position: relative; } .txtbody p:before { content: "\2714"; background-repeat: no-repeat; display: block; position: absolute; left: 0; top: 0px; } 
     <div class="contbody"> <h4>Общие параметры линейки :</h4> <div class="col"> <div class="txtbody"> <p>Интегрированная компрессорная станция с адсорбционным осушителем и грамотной системой управления и диагностики представляет собой абсолютно новый стандарт качества производства сжатого воздуха.</p> </div> <div class="txtbody"> <p>Диагностика и управление эксплуатационными режимами для увеличения эффективности и увеличения срока службы.</p> </div> </div> <div class="col"> <div class="txtbody"> <p>Диагностика и управление эксплуатационными режимами для увеличения эффективности и увеличения срока службы.</p> </div> <div class="txtbody"> <p>В результате удобной установки деталей в общем корпусе была создана интегрированная компоновка компрессорной станции, легко подключаемой к потребителям воздуха.</p> </div> <div class="txtbody"> <p>Современные и высокоэффективные компоненты (новый блок 5-го поколения A150).</p> </div> </div> </div>

    • Yes, but look at the picture, there is one big block to the left - two small ones to the right. - Alexander
    • There is no clearing around. Then you need to make two parents for them? - Alexander
    • one
      Exactly), I was guided by your example and did not see another paragraph) sorry - HamSter
    • one
      @Alexander, slightly corrected the answer, but all variants are wrappers. - HamSter

    Example using - columns

     .contbody-container{ float: left; margin-left: 1%; width: 100%; } .contbody { -webkit-columns: 2; -moz-columns: 2; columns: 2; } .contbody h4 { color: #4a275c; font-size: 18px; font-weight: 700; } .txtbody{} .txtbody p { font-size: 14px; font-weight: 400; color: #090213; } .txtbody p { padding-left: 20px; position: relative; } .txtbody p:before { content: "\2714"; background-repeat: no-repeat; display: block; position: absolute; left: 0; top: 0px; } 
     <div class="contbody-container"> <h4>Общие параметры линейки :</h4> <div class="contbody"> <div class="txtbody"> <p>Интегрированная компрессорная станция с адсорбционным осушителем и грамотной системой управления и диагностики представляет собой абсолютно новый стандарт качества производства сжатого воздуха.</p> </div> <div class="txtbody"> <p>Диагностика и управление эксплуатационными режимами для увеличения эффективности и увеличения срока службы.</p> </div> <div class="txtbody"> <p>В результате удобной установки деталей в общем корпусе была создана интегрированная компоновка компрессорной станции, легко подключаемой к потребителям воздуха.</p> </div> <div class="txtbody"> <p>Современные и высокоэффективные компоненты (новый блок 5-го поколения A150).</p> </div> <div class="txtbody"> <p>В результате удобной установки деталей в общем корпусе была создана интегрированная компоновка компрессорной станции, легко подключаемой к потребителям воздуха.</p> </div> <div class="txtbody"> <p>Современные и высокоэффективные компоненты (новый блок 5-го поколения A150).</p> </div> </div> </div>