How do I align multiple Ivs within a container?

Asked

Viewed 43 times

0

I’m having a problem, I’m trying to align several Ivs inside a container, more specifically 3, what I want is to get them all aligned on each other’s side, but one ends up going down and I don’t know how to solve it, follow the code:

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html, body{
    height: 100%;
}

.clear{
    clear: both;
}

.container{
    width: 100%;
    max-width: 764px;
    margin: 20px auto;
    padding: 40px 0;
    border: 3px solid rgb(220, 220, 220);
    ;
    
}

.img-wraper{
    width: 33.3%;
    margin: 10px;
    padding-top: 23.3%;
    padding-left: 23.3%;
    float: left;
   /* background-color: #ccc; */
    position: relative; 
    
}

.img{
    border: 2px solid black ;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    
}
<body>

    <div class="container">

        <div class="img-wraper">

            <div class="img" style="background-image:url('imagens/imagem1.jpg');"></div>
            
        </div> <!--img-wraper-->
        
        <div class="img-wraper">

            <div class="img" style="background-image:url('imagens/imagem1.jpg');"></div>
            
        </div> <!--img-wraper-->
        
        <div class="img-wraper">

            <div class="img" style="background-image:url('imagens/imagem1.jpg');"></div>
            
        </div> <!--img-wraper-->
        <div class="clear"></div>
    </div> <!--container-->

</body>

Segue como está no navegador

html css front-end

  • create a functional example showing how to understand better

  • 1

    @Ricardopunctual he even created a 100% reproducible example. But he lacked formatting. He still doesn’t have much intimacy with the site. I helped editing his question. Got filet!

  • now yes, when I saw the question there was only the code

  • 1

    Those <div> possess margin what influence on Box Model (Cash Model, https://developer.mozilla.org/en-US/docs/Web/CSS/box_model) and it turns out that the width and height of the element are all summed up, thus not fitting in the parent container. This is the same thing you want to get in the car through the door, following the reasoning the car is big and the door is small, so the car won’t get in, the same thing happens in your example.

1 answer

3


The problem is that you divided the exact container space between the three div.

So far, so good. The space of each one can be 33.3%. If you want more precise, I recommend using 33.33%. But the main problem is that you put a margin of 10px in those div.

To solve this, you can use the function calc() of the CSS itself. The idea is that its div occupy 33.3% - 20px. Remember that the margin is 10px on each edge! Therefore, the width should be considered 10px left and 10px to the right. Finally we arrived in calc(33.3% - 20px).

Tip #1: by CSS syntax, one should not omit the spaces between the operator. This is a syntax error: calc(33.3%-20px).

Tip #2: when that extra space is related to the padding or border, you can simply consider these properties in general element sizing with box-sizing: border-box;.

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html, body{
    height: 100%;
}

.clear{
    clear: both;
}

.container{
    width: 100%;
    max-width: 764px;
    margin: 20px auto;
    padding: 40px 0;
    border: 3px solid rgb(220, 220, 220);
    ;
    
}

.img-wraper{
    width: calc(33.3% - 20px);
    margin: 10px;
    padding-top: 23.3%;
    padding-left: 23.3%;
    float: left;
   /* background-color: #ccc; */
    position: relative; 
    
}

.img{
    border: 2px solid black ;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    
}
<body>

    <div class="container">

        <div class="img-wraper">

            <div class="img" style="background-image:url('imagens/imagem1.jpg');"></div>
            
        </div> <!--img-wraper-->
        
        <div class="img-wraper">

            <div class="img" style="background-image:url('imagens/imagem1.jpg');"></div>
            
        </div> <!--img-wraper-->
        
        <div class="img-wraper">

            <div class="img" style="background-image:url('imagens/imagem1.jpg');"></div>
            
        </div> <!--img-wraper-->
        <div class="clear"></div>
    </div> <!--container-->

</body>

Recommended reading: CSS Calc()

Browser other questions tagged html css front-end

You are not signed in. Login or sign up in order to post.