Why the block does not stretch in relation to nested blocks?

Question

Hello. I can not force id = "case_case2" to stretch to the height of the largest block.

.case_content2 { display: inline-block; width: 730px; float: right; } .menu_left { display: inline-block; float: left; } .menu_left a { display: block; width: 200px; background-color: #3787cd; } #case_case2 { background-color: #185a96; padding: 20px; border-top: 4px solid #347aba; border-left: 4px solid #347aba; border-right: 4px solid #347aba; border-bottom: 1px solid #347aba; margin-top: 0px; } .content_article { background-color: #EEEEEE; padding: 10px; line-height: 22px; border-radius: 0 0 8px 8px; font-size: 0.9em; }

  <div id="case_case2"> <div class="case_content2"> <div class="content_article"> <b>Во время строительства или ремонта наступает время, когда нужно выбрать радиаторы отопления.</b><br /> <b>Какие лучше?</b> – обычно спрашивают покупатели у специалистов. На этот вопрос нет однозначного ответа. Каждый тип радиаторов имеет как свои преимущества, так и свои недостатки. Поэтому вместо вопроса, какие хорошие радиаторы отопления вы знаете, нужно выяснить какой тип радиаторов максимально подходит именно для вашей системы отопления. Для этого нужно знать вид отопления, величину рабочего и максимального давления в системе, температуру и уровень кислотности теплоносителя. А определившись с типом радиатора, подходящую модель подобрать уже не сложно. </div> </div> <div class="menu_left"> <a href="/">Алюминиевые радиаторы</a> <a href="/">Биметаллические радиаторы</a> <a href="/">Комплектующие к радиаторам</a> <a href="/">Рекомендации по выбору радиатора</a> </div> </div>

If the answer helped, check the box to the left of the answer, thank you.

user192664 · Accepted Answer · 2016-08-09T11:38:07

If you want case_content2 block inside case_case2 set for case_case2 :

 case_case2 { min-height: someValue; overflow: auto; }

case_case2 out the case_case2 menu from menu_left . And then replace width with 100% :

 .case_content2 { display: inline-block; width: 100%; float: right; }

Working Example: JSFiddle

The second option: JSFiddle2

Answer 2 · 2016-08-09T11:36:26

It is logical, because the nested blocks you have float, i.e. are in a different thread.

 .case_content2 { display: inline-block; width: 730px; } .menu_left { display: inline-block; } .menu_left a { display: block; width: 200px; background-color: #3787cd; } #case_case2 { background-color: #185a96; padding: 20px; border-top: 4px solid #347aba; border-left: 4px solid #347aba; border-right: 4px solid #347aba; border-bottom: 1px solid #347aba; margin-top: 0px; display: flex; flex-direction: row-reverse; } .content_article { background-color: #EEEEEE; padding: 10px; line-height: 22px; border-radius: 0 0 8px 8px; font-size: 0.9em; }

 <div id="case_case2"> <div class="case_content2"> <div class="content_article"> <b>Во время строительства или ремонта наступает время, когда нужно выбрать радиаторы отопления.</b> <br /> <b>Какие лучше?</b> – обычно спрашивают покупатели у специалистов. На этот вопрос нет однозначного ответа. Каждый тип радиаторов имеет как свои преимущества, так и свои недостатки. Поэтому вместо вопроса, какие хорошие радиаторы отопления вы знаете, нужно выяснить какой тип радиаторов максимально подходит именно для вашей системы отопления. Для этого нужно знать вид отопления, величину рабочего и максимального давления в системе, температуру и уровень кислотности теплоносителя. А определившись с типом радиатора, подходящую модель подобрать уже не сложно. </div> </div> <div class="menu_left"> <a href="/">Алюминиевые радиаторы</a> <a href="/">Биметаллические радиаторы</a> <a href="/">Комплектующие к радиаторам</a> <a href="/">Рекомендации по выбору радиатора</a> </div> </div>

the fact is that the block with the text I need is on the right side

Why the block does not stretch in relation to nested blocks?

2 answers 2

More articles: