Question

I am trying to position two <div>s within each other, but it seems when I input text into the <div> on the left side, it gets pushed down. It’s almost like there is an element above it, but there is no object there, while the one it is supposed to be inline with stays in the right place.

HTML code:

<div id="header_div">

 <div id="header_div_left">Home</div>

 <div id="header_div_right"></div>

</div>

CSS code:

#header_div {
    width: 980px;
    height: 125px;
    padding: 10px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border: 2px solid #A5A5A5;
    background-color: #191919;
    margin-left: auto;
    margin-right: auto;
    border-top: 4px solid #E00000;
}

#header_div_left {
    display: inline-block;
    width: 290px;
    height: 120px;
    margin-right: 5px;
    line-height: 120px;
    text-align: center;
    border: 2px solid #A5A5A5;
    background-color: #191919;
    border-bottom-left-radius: 10px;
}

#header_div_right {
    display: inline-block;
    width: 655px;
    height: 120px;
    margin-left: 5px;
    border: 2px solid #A5A5A5;
    background-color: #191919;
    border-bottom-right-radius: 10px;
}

Thanks 🙂

Answer 1

Add vertical-align:top to the inner divs.

jsFiddle example

Since you set the inner divs to have an inline-block display, you want to align them to the top of their parent div.