Hello. There is a block with a background, a description and a form in it. demonstration Why does the form have the same height as the parent <div class="product-frame"> ? I want to place the form to the right of the description without changing the html structure, but if I just add the width. .content-description { width:50%; } .content-description { width:50%; } in the form form { float:left;} , the background of the block is deleted, while removing overflow: hidden; gives nothing. What can be done?

 .product-frame { background-color: blue; position: relative; z-index: 1; } .content-description { float: left; overflow: hidden; } 
 <div class="product-frame"> <div class="content-description"> <p>ОписаниС описаниС описаниС описаниС описаниС описаниС описаниС описаниС описаниС</p> <p>ОписаниС описаниС описаниС описаниС описаниС описаниС описаниС описаниС описаниС</p> <p>ОписаниС описаниС описаниС описаниС описаниС описаниС описаниС описаниС описаниС</p> </div> <form method="post"> <input type="hidden" name="add-to-cart" value="3350"> <input type="hidden" name="product_id" value="3350"> <input type="hidden" name="variation_id" value="3357"> <button type="submit" class="add_to_cart_button">ΠšΡƒΠΏΠΈΡ‚ΡŒ</button> </form> </div>

The addition of overflow:hidden; helped overflow:hidden; containing div and

 .content-description { float:left; width:50%; overflow:visible; } form { float:left; width:50%; }

The result is here.

    1 answer 1

    It is necessary to add the .content-description block and the form

     float: left; width: 50%;

    And to the .product-frame container add overflow: hidden; or clearfix, if you use it.

    • helped and yet - why is this happening? I want to understand the mechanism itself - Vasya
    • one
      It's simple - float was originally designed for wrapping text images. To use this property for columns, all columns must have the float: left or float: right property. In addition, after the columns you need to "clear the stream" - assign overflow: hidden to the container or put a block with the clear: both property after the columns or use clearfix (google "clear stream in html" and "clearfix") - Sergey
    • yes, ok @Sergey, I understand what stream cleaning is, but it is unclear why a form without float takes up all the space? if content-description had absolute positioning - is it one thing or float in this case is also out of the stream - yes? - Vasya
    • one
      Because <form> is a block element and by default occupies the entire available width. And the float at the block with descriptions is knocked out of the stream, yes, and it turns out that the form as a block element does not flow around this block, and the content of the form flows around it. - Sergey