CODEWITHSUNDEEP
htmlcss
Charlie805
Charlie805

Reputation: 169

How to make middle div higher than first and second

I have three divs and I want the middle div to be higher than other two.

I tried using top:-50 for the second div, but it didn't work. 

.cards {
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.card {
    flex: 0 0 31%;
    margin: 0 1% 2% 1%;
    height: 300px;
    background-color: red;
}

@media only screen and (max-width: 460px) {
    .card {
        flex: 0 0 48%;
    }
}

@media only screen and (max-width: 360px) {
    .card {
        flex: 0 0 100%;
    }
}
    <div class="cards">
        <div class="card">
        </div>
        <div class="card">
        </div>
        <div class="card">
        </div>
    </div>
column of three divs center one is higher

Upvotes: 2

Views: 278

Answers (2)

nstanard
nstanard

Reputation: 823

You're using flexbox! Don't rely on margins.

codepen: https://codepen.io/nstanard/pen/gqYrjZ

    .cards {
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        height: 350px;
        justify-content: bottom;
        align-items: flex-end;
    }

    .card {
        flex: 0 0 31%;
        margin: 0 10px;
        height: 300px;
        background-color: red;
    }

    .card:nth-child(2) {
        align-self: flex-start;
    }

    @media only screen and (max-width: 460px) {
        .card {
            flex: 0 0 48%;
        }
    }

    @media only screen and (max-width: 360px) {
        .card {
            flex: 0 0 100%;
        }
    }

<div class="cards">
        <div class="card">
        </div>
        <div class="card">
        </div>
        <div class="card">
        </div>
    </div>

snippet:

.cards {
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    height: 350px;
    align-items: center;
}

.card {
    flex: 0 0 31%;
    margin: 0 1% 2% 1%;
    height: 300px;
    background-color: red;
}
.card:nth-child(2) {
    align-self: flex-start;
}

@media only screen and (max-width: 460px) {
    .card {
        flex: 0 0 48%;
    }
}

@media only screen and (max-width: 360px) {
    .card {
        flex: 0 0 100%;
    }
}
    <div class="cards">
        <div class="card">
        </div>
        <div class="card">
        </div>
        <div class="card">
        </div>
    </div>

Upvotes: 2

Udhay Titus
Udhay Titus

Reputation: 5869

for second div use margin-top and margin-bottom is -50px it will works...

so use this class

.card:nth-child(2){
  margin:-50px 0;
}


.cards {
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top:60px;
}

.card {
    flex: 0 0 31%;
    margin: 0 1% 2% 1%;
    height: 300px;
    background-color: red;
}

.card:nth-child(2){
  margin:-50px 0;
}

@media only screen and (max-width: 460px) {
    .card {
        flex: 0 0 48%;
    }
}

@media only screen and (max-width: 360px) {
    .card {
        flex: 0 0 100%;
    }
}
<div class="cards">
        <div class="card">
        </div>
        <div class="card">
        </div>
        <div class="card">
        </div>
    </div>

Upvotes: 1

Related Questions