I have two divs displayed using display: inline-block, in order to have them next to each other. This works when neither of the divs have text in them. However, when I put text in one div, it moves it down dramatically, while the other keeps the same position. This happens regardless of what div I put the text in; if I put it in both, however, only the left div will go down.
Here's a codepen to show what I mean: http://codepen.io/anon/pen/MwEKPp
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
#main_container {
width: 1000px;
height: 95%;
margin: 0 auto;
font-size: 0px;
}
#logo {
display: inline-block;
height: 200px;
width: 200px;
background-color: aqua;
font-size: 20px;
}
#title_area {
display: inline-block;
font-size: 20px;
height: 200px;
width: 800px;
background-color: rgb(60,105,123);
font-family: "open sans";
font-size: 60px;
}<div id="main_container">
<div id="logo_title_area">
<div id="logo">
test
</div>
<div id="title_area">
test
</div>
</div>
</div>Entering text into the divs labelled logo and title_area will produce the effect I'm talking about.
Does anyone have any idea how to fix this? I need them to remain side-by-side regardless of their contents. Thanks in advance!
