HTML CSS Two div Horizontal alignment issue

Question

I have an issue in horizontalling two divs(NameProfession,buttonsParent : name of my code divs ), both divs horizontally aligned perfectly. when there is no content. but the div (first one in this case) has content. it moves a little bit down.

In it i don't have to use flex box or grid system. Just wanna know why its happening and how to resolve it.

*
{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.card
{
    /* border: solid red 1px; */
    background-color: coral;
    width: 600px;
    height: 280px;
    margin: 0 auto;
    position: relative;
}
.header
{
    background-image: url("images/bg.jpg");
    background-size: cover;
    width: 100%;
    height: 50%;
}
.NameProfession
{
    /* border: solid rgb(255, 255, 255) 1px; */
    background-color: pink;
    height: 100%;
    width: 50%;
    display: inline-block;
}
.nameParent
{
    background-color: blanchedalmond;
    height: 50%;
    text-align: center;
}
.name
{
    background-color: black;
    color: white;
    font-size: 26px;
    position: relative;
    top: 35%;
}
.professionParent
{
    background-color: cadetblue;
    height: 50%;
}
.profession
{
    /* background-color: black; */
    color: rgb(238, 236, 236);
    position: relative;
    top: 20%;
    left: 70%;
}

.buttonsParent
{
    background-color: red;
    width: 49%;
    display: inline-block;
    height: 100%;
}

    <div class="card">

        <div class="header">

            <div class="NameProfession">
                <div class="nameParent">
                    <strong class="name">John Doe</strong>
                </div>
                <div class="professionParent">
                    <small class="profession">Photographer <br> Boston,MA</small>
                </div>
            </div>

            <div class="buttonsParent">

            </div>

        </div>
    </div>

[1]: https://i.stack.imgur.com/unmXO.png

score 1 · Answer 1 · answered Nov 06 '21 at 17:51

        *{
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    .card
    {
        /* border: solid red 1px; */
        background-color: coral;
        width: 600px;
        height: 280px;
        margin: 0 auto;
        position: relative;
    }
    .header
    {
        background-image: url("images/bg.jpg");
        background-size: cover;
        width: 100%;
        height: 50%;
    }
    .NameProfession
    {
        /* border: solid rgb(255, 255, 255) 1px; */
        background-color: pink;
        height: 100%;
        width: 50%;
        display: inline-block;
        vertical-align: top;

    }
    .nameParent
    {
        background-color: blanchedalmond;
        height: 50%;
        text-align: center;
    }
    .name
    {
        background-color: black;
        color: white;
        font-size: 26px;
        position: relative;
        top: 35%;
    }
    .professionParent
    {
        background-color: cadetblue;
        height: 50%;
    }
    .profession
    {
        /* background-color: black; */
        color: rgb(238, 236, 236);
        position: relative;
        top: 20%;
        left: 70%;
    }
    
    .buttonsParent
    {
        background-color: red;
        width: 49%;
        display: inline-block;
        height: 100%;
    }

<div class="card">

    <div class="header">

        <div class="NameProfession">
            <div class="nameParent">
                <strong class="name">John Doe</strong>
            </div>
            <div class="professionParent">
                <small class="profession">Photographer <br> Boston,MA</small>
            </div>
        </div>

        <div class="buttonsParent">

        </div>

    </div>
</div>

Hi Harry, The problem is with the vertical-align property. By default browser is adding the vertical-align: Baseline property for the div with class="NameProfession". You can solve it by adding the vertical-align: top or vertical-align: bottom for the div with class="NameProfession"

score 0 · Accepted Answer · answered Nov 06 '21 at 17:59

one of your div's was overflowing and causing the buttonsParent div to flow to the next row. You can reslove this by floating it right as well. Made the CSS changes above.

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.card
{
    /* border: solid red 1px; */
    background-color: coral;
    width: 600px;
    height: 300px;
    margin: 0 auto;
    position: relative;
}
.header
{
    background-image: url("images/bg.jpg");
    background-size: cover;
    /* width: 100%; */
    /* height: 50%; */
}
.NameProfession
{
    /* border: solid rgb(255, 255, 255) 1px; */
    background-color: pink;
    height: 100%;
    width: 50%;
    display: inline-block;
}
.nameParent
{
    background-color: blanchedalmond;
    height: 50%;
    text-align: center;
}
.name
{
    background-color: black;
    color: white;
    font-size: 26px;
    position: relative;
    top: 35%;
}
.professionParent
{
    background-color: cadetblue;
    height: 50%;
}
.profession
{
    /* background-color: black; */
    color: rgb(238, 236, 236);
    position: relative;
    top: 20%;
    left: 70%;
}

.buttonsParent
{
    float: right;
    background-color: red;
    width: 50%;
    display: inline-block;
    height: 100%;
}

HTML CSS Two div Horizontal alignment issue

2 Answers2