Father Div Diving

Navigation
0

I have the following HTML: 

<div id="fotos-listagem">
    <div id="fotos-listagem-imagem">
        <img src="http://localhost/proyectopen/assets/uploads/interno_fotos/ingresso/1348357833.jpg"class="img-responsive corte-imagem">
    </div>
    <div id="fotos-listagem-imagem">
        <img src="http://localhost/proyectopen/assets/uploads/interno_fotos/ingresso/1075751499.jpg"class="img-responsive corte-imagem">
    </div>
    <div id="fotos-listagem-imagem">
        <img src="http://localhost/proyectopen/assets/uploads/interno_fotos/ingresso/422227837.jpg"class="img-responsive corte-imagem">
    </div>
    <div id="fotos-listagem-imagem">
        <img src="http://localhost/proyectopen/assets/uploads/interno_fotos/ingresso/286290440.jpg"class="img-responsive corte-imagem">
    </div>
    <div id="fotos-listagem-imagem">
        <img src="http://localhost/proyectopen/assets/uploads/interno_fotos/ingresso/957801387.jpg"class="img-responsive corte-imagem">
    </div>
    <input type="file" class="upload-multiplo" name="fotos_ingresso" id="fotos_ingresso" accept="image/*">
</div>

And the following CSS: 

#fotos-listagem {
    padding: 5px;
    border: 1px solid #CCCCCC;
    margin: 5px;
    background-color: #EDEDED;
    min-height: ;
}

#fotos-listagem-imagem {
    width: 140px;
    height: 140px;
    float: left !important;
}
.corte-imagem {
    width: 130px;
    height: 130px;
    object-fit: cover;
    object-position: center;
}

However, when viewing it looks like this: The gray background is below, but does not match the size of the div that is inside. How to solve?

    
asked by anonymous 25.07.2017 / 22:42

1 answer

1

This happens because the internal divs are floating. Floating elements do not influence the size of ancestors. The solution is simple, just put overflow: hidden in #fotos-listagem (a trick to break floats context) so that the browser will consider the height of the children. 

#fotos-listagem {
    padding: 5px;
    border: 1px solid #CCCCCC;
    margin: 5px;
    background-color: #EDEDED;
    overflow: hidden;
    
}

#fotos-listagem-imagem {
    width: 140px;
    height: 140px;
    float: left !important;
}
.corte-imagem {
    width: 130px;
    height: 130px;
    object-fit: cover;
    object-position: center;
}
<div id="fotos-listagem">
    <div id="fotos-listagem-imagem">
        <img src="http://localhost/proyectopen/assets/uploads/interno_fotos/ingresso/1348357833.jpg"class="img-responsive corte-imagem">
    </div>
    <div id="fotos-listagem-imagem">
        <img src="http://localhost/proyectopen/assets/uploads/interno_fotos/ingresso/1075751499.jpg"class="img-responsive corte-imagem">
    </div>
    <div id="fotos-listagem-imagem">
        <img src="http://localhost/proyectopen/assets/uploads/interno_fotos/ingresso/422227837.jpg"class="img-responsive corte-imagem">
    </div>
    <div id="fotos-listagem-imagem">
        <img src="http://localhost/proyectopen/assets/uploads/interno_fotos/ingresso/286290440.jpg"class="img-responsive corte-imagem">
    </div>
    <div id="fotos-listagem-imagem">
        <img src="http://localhost/proyectopen/assets/uploads/interno_fotos/ingresso/957801387.jpg"class="img-responsive corte-imagem">
    </div>
    <input type="file" class="upload-multiplo" name="fotos_ingresso" id="fotos_ingresso" accept="image/*">
</div>
    
25.07.2017 / 22:50
Bank query with accent on the table Error trying to create new MySql table