Good day everyone!
Problem: I can not automatically increase the yellow background field β. content1 β
#wrapper { width: 84%; margin: auto; margin-top: -8px; height:100%; background: #fff; -webkit-box-shadow: 0 0 15px #b1b1b1; box-shadow: 0 0 15px #b1b1b1; position: relative; min-height: 100%; } #content {float: left; width: 100%; position: relative; overflow: hidden; background: #FFF;} #content .content1 {margin: 0 auto; width: 98%; height: 100%; position: relative; background: #E3E2C6; border-radius: 12px; margin-top: -5px; margin-bottom: 40px; display: block;} #content .content1 .body3 {width:100%; padding-top: 1px; position: relative; display: block;} #content .content1 .side-r2 {width:100%; height: 100%; text-align:left; position: relative; padding-bottom: 15px; display: block;} #content .content1 .r2-img {float: left; background: #fff; margin-left: 40px; width: 40%; padding: 6px; border: 1px solid #e1e1e1;} #content .content1 .r2-text { float: right; margin-right: 40px; margin-left: 5px; width: 45%; text-align: justify; font-size: 14px; line-height: 20px; margin-top: -17px;} <table id="wrapper"> <div id="content"> <div class="content1"> <div class="body3"> <h2>ΠΠΠΠΠΠΠΠΠ</h2> </div> <div class="side-r2"> <br> <div class="r2-img"> <img src="images/main.jpg" alt="filler image"> </div> <div class="r2-text"> <h4> ΠΠΠ«Π§ΠΠ«Π Π’ΠΠΠ‘Π’ </h4> </div> </div> </div> </div> </table> In this example, the height of β.side-r2β is very narrow, although it includes two divas β.r2-imgβ and β.r2-textβ. You can certainly increase the height of the background β.content1β in pixels, but this is not an option. It is necessary that he completely closed the two divas β.body3β and β.side-r2β and was below the text and pictures. I tried many options - it does not work at all. What is the reason?
