How to make three blocks of the same height in indented CSS?

Question

How to create three rubber blocks of the same height so that the contour is like in the picture? I tried various options, I can not find a solution. With the table for some reason it does not work to achieve the same contour in height. Initially I tried this html, then I tried to add wrappers: There is no difficulty with circles, only with a stroke on rubber blocks.

.blocks-promo { position: relative; width: 100%; margin: 40px 0; } .block-promo-wrapper { position: relative; width: 33.3333%; float: left; padding: 50px 10px 0; margin-bottom: 30px; } .block-promo-icon-assortiment, .block-promo-icon-otnosheniia, .block-promo-icon-opyt { position: absolute; top: 0px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); margin: 0 auto; -webkit-backface-visibility: hidden; height: 100px; width: 100px; border-radius: 100px; background-color: #95c12b; } .block-promo-icon-assortiment:before, .block-promo-icon-otnosheniia:before, .block-promo-icon-opyt:before { content: ''; position: absolute; height: 48px; width: 48px; top: 26px; left: 26px; } .block-promo-icon-assortiment:before { background: url('../images/ic_shopping_cart_white_48px.svg') no-repeat; } .block-promo-icon-otnosheniia:before { background: url('../images/ic_group_white_48px.svg') no-repeat; } .block-promo-icon-opyt:before { background: url('../images/ic_star_white_48px.svg') no-repeat; } .block-promo-content { padding: 80px 20px 30px; border: 1px solid #e0e0e0; } .block-promo-title { text-align: center; } @media only screen and (max-width: 770px) { .block-promo-wrapper { width: 100%; } }

 <div class="blocks-promo"> <div class="block-promo-wrapper"> <span class="block-promo-icon-assortiment"></span> <div class="block-promo-content"> <h2 class="block-promo-title">Заголовок</h2> <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p> </div> </div> <div class="block-promo-wrapper"> <span class="block-promo-icon-otnosheniia"></span> <div class="block-promo-content"> <h2 class="block-promo-title">Заголовок</h2> <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p> </div> </div> <div class="block-promo-wrapper"> <span class="block-promo-icon-opyt"></span> <div class="block-promo-content"> <h2 class="block-promo-title">Заголовок</h2> <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p> </div> </div> </div>

All the answers are working, I chose table because it is supported by a large number of browsers.

Accepted Answer · 2017-01-13T08:59:06

Option using display: table

For indentation use border-spacing

The table is divided into columns of equal width using table-layout: fixed

The width of the columns in this case is determined either by using the <col> , or is calculated on the basis of the first row. If the data on the formatting of the first row of the table for any reason cannot be obtained, in this case the table is divided into columns of equal width. When using this value, the content that does not fit in a cell of the specified width will be “cropped” or superimposed over the cell. It depends on the browser used, but in any case, the cell width will not change. For this value to work correctly, the width of the table must be specified.

 * { padding: 0; margin: 0; box-sizing: border-box; } .b { display: table; width: 100%; table-layout: fixed; height: 50px; border-spacing: 10px 65px; } .b-item { display: table-cell; vertical-align: top; border: 1px solid #ccc; padding: 15px; position: relative; } .b-item-circle { margin: -65px auto 10px auto; width: 100px; height: 100px; background: green; border-radius: 50%; } .b-item-title { text-align: center; font-size: 24px; font-weight: 700; text-transform: uppercase; }

 <div class="b"> <div class="b-item"> <div class="b-item-circle"></div> <div class="b-item-title">title</div> <div class="b-item-text">text</div> </div> <div class="b-item"> <div class="b-item-circle"></div> <div class="b-item-title">title</div> <div class="b-item-text">Как создать три резиновых блока одинаковой высоты, чтобы контур был как на картинке? Испробовал различные варианты, не получается найти решение. С таблицей почему-то не получается добиться одинакового контура по высоте. Изначально пробовал этот html, потом пробовал добавлять обертки: С кругами сложности нет, только с обводкой на резиновых блоках.</div> </div> <div class="b-item"> <div class="b-item-circle"></div> <div class="b-item-title">title</div> <div class="b-item-text">text</div> </div> </div>

Thanks, but table-layout: fixed; fixes the width, and the blocks should be rubber. - Sylon
table-layout: fixed; - the table is divided into columns of equal width - soledar10

Answer 2 · 2017-01-13T08:58:01

I can offer the implementation of this problem using flexbox. So the blocks will come out more flexible. I will also set a fixed height for .text , so that you see that the height of the parent block remains the same (you can remove the fixed height):

 body {font-family: arial;} .blocks { display: flex; width: 100%; margin-top: 40px; } .blocks .block { position: relative; padding: 35px 8px 8px 8px; margin: 3px; border: 1px solid #efefef; flex: 1; } .blocks .block .circle { position: absolute; top: 0; left: 50%; width: 50px; height: 50px; border-radius: 50%; background-color: #95c12c; transform: translate(-50%, -50%); } .blocks .block .title { width: 80%; margin: 0 auto; text-align: center; text-transform: uppercase; background-color: #e1e1e1; padding: 4px; font-size: 0.8rem } .blocks .block .text { margin: 0 auto; text-transform: uppercase; background-color: #e1e1e1; margin-top: 5px; padding: 4px; font-size: 1rem; text-align: center; padding-top: 20px; }

 <div class="blocks"> <div class="block"> <div class="circle"></div> <div class="title">Заголовок</div> <div class="text" style="height: 80px;">Текст</div> </div> <div class="block"> <div class="circle"></div> <div class="title">Заголовок</div> <div class="text" style="height: 60px;">Текст</div> </div> <div class="block"> <div class="circle"></div> <div class="title">Заголовок</div> <div class="text" style="height: 70px;">Текст</div> </div> </div>

Thank you, but the problem is that there is no indentation between the blocks.
I look at the width of the fixed set, the option with 33.333% does not fit?
@SergeyEremin, hold, blocks without a fixed width, adapt to the entire width
@SergeyEremin Indent can either set a fixed .block + .block { /* любое число px */ margin-left: 10px; }
.block + .block { /* любое число px */ margin-left: 10px; } or rubber, setting for .blocks { justify-content: space-between; }
.blocks { justify-content: space-between; } for .block { /* любое число % */ width: 20% } , remove flex: 1;

Answer 3 · 2017-01-13T08:31:20

The problem was with padding'ом , now everything works. When you add padding to a block, it is always at the expense of the width, and then the block does not fall into place.

 .blocks-promo { position: relative; display:flex; align-items:stretch; width: 100%; margin: 40px 0; } .block-promo-wrapper { width: 33%; float: left; padding-right:50px; margin-bottom: 30px; } .block-promo-icon-assortiment, .block-promo-icon-otnosheniia, .block-promo-icon-opyt { position: absolute; top: 0px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); margin: 0 auto; -webkit-backface-visibility: hidden; height: 100px; width: 100px; border-radius: 100px; background-color: #95c12b; } .block-promo-icon-assortiment:before, .block-promo-icon-otnosheniia:before, .block-promo-icon-opyt:before { content: ''; position: absolute; height: 48px; width: 48px; top: 26px; left: 26px; } .block-promo-icon-assortiment:before { background: url('../images/ic_shopping_cart_white_48px.svg') no-repeat; } .block-promo-icon-otnosheniia:before { background: url('../images/ic_group_white_48px.svg') no-repeat; } .block-promo-icon-opyt:before { background: url('../images/ic_star_white_48px.svg') no-repeat; } .block-promo-content { padding: 80px 20px 30px; border: 1px solid #e0e0e0; height: calc(100% - 110px) } .block-promo-title { text-align: center; } @media only screen and (max-width: 770px) { .block-promo-wrapper { width: 100%; } .blocks-promo { position: relative; display:block; align-items:stretch; width: 100%; margin: 0px; } }

 <div class="blocks-promo"> <div class="block-promo-wrapper"> <span class="block-promo-icon-assortiment"></span> <div class="block-promo-content"> <h2 class="block-promo-title">Заголовок</h2> <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p> </div> </div> <div class="block-promo-wrapper"> <span class="block-promo-icon-otnosheniia"></span> <div class="block-promo-content"> <h2 class="block-promo-title">Заголовок</h2> <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p> </div> </div> <div class="block-promo-wrapper"> <span class="block-promo-icon-opyt"></span> <div class="block-promo-content"> <h2 class="block-promo-title">Заголовок</h2> <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p> </div> </div> </div>

Thank you, but you just got one of my options, where in the end there are no indents, as in the picture, and the result is needed as in the picture.

Crantisz Crantisz 8.599 2 eight 38 · Answer 4 · 2017-01-13T08:58:32

You need flex

 .blocks-promo { display: flex; align-items: stretch; }

Nested element count from 100% of the height - the absence of:

 .block-promo-content { height: calc(100% - 110px) }

 .blocks-promo { position: relative; width: 100%; margin: 40px 0; display: flex; align-items: stretch; } .block-promo-wrapper { position: relative; width: 33%; float: left; padding: 50px 10px 0; margin-bottom: 30px; } .block-promo-icon-assortiment, .block-promo-icon-otnosheniia, .block-promo-icon-opyt { position: absolute; top: 0px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); margin: 0 auto; -webkit-backface-visibility: hidden; height: 100px; width: 100px; border-radius: 100px; background-color: #95c12b; } .block-promo-icon-assortiment:before, .block-promo-icon-otnosheniia:before, .block-promo-icon-opyt:before { content: ''; position: absolute; height: 48px; width: 48px; top: 26px; left: 26px; } .block-promo-icon-assortiment:before { background: url('../images/ic_shopping_cart_white_48px.svg') no-repeat; } .block-promo-icon-otnosheniia:before { background: url('../images/ic_group_white_48px.svg') no-repeat; } .block-promo-icon-opyt:before { background: url('../images/ic_star_white_48px.svg') no-repeat; } .block-promo-content { padding: 80px 20px 30px; border: 1px solid #e0e0e0; height: calc(100% - 110px) } .block-promo-title { text-align: center; } @media only screen and (max-width: 770px) { .block-promo-wrapper { width: 100%; } }

 <div class="blocks-promo"> <div class="block-promo-wrapper"> <span class="block-promo-icon-assortiment"></span> <div class="block-promo-content"> <h2 class="block-promo-title">Заголовок</h2> <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p> </div> </div> <div class="block-promo-wrapper"> <span class="block-promo-icon-otnosheniia"></span> <div class="block-promo-content"> <h2 class="block-promo-title">Заголовок</h2> <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p> </div> </div> <div class="block-promo-wrapper"> <span class="block-promo-icon-opyt"></span> <div class="block-promo-content"> <h2 class="block-promo-title">Заголовок</h2> <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p> </div> </div> </div>

About height: calc (100% - 110px) did not understand what it is done for.
I understand it judging because the parent unit is shifted, it is necessary for rendering to return the nested block into place.
But the blocks nested in them remain their height, so I put 100% height and take 110px - the amount of padding above and below.
It is possible as an option to replace with box-sizing: border-box;
The only accepted with the tables because they have more support for different browsers.

How to make three blocks of the same height in indented CSS?

4 answers 4

More articles: