html - Two divs next to each other, one moves down when text is in the other -


i have 2 divs displayed using display: inline-block, in order have them next each other. works when neither of divs have text in them. however, when put text in 1 div, moves down dramatically, while other keeps same position. happens regardless of div put text in; if put in both, however, left div go down.

here's codepen show 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 divs labelled logo , title_area produce effect i'm talking about.

does have idea how fix this? need them remain side-by-side regardless of contents. in advance!

it's missing vertical alignment, default value baseline.

e {     display: inline-block;     vertical-align: top; } 

Comments

Popular posts from this blog

PHP DOM loadHTML() method unusual warning -

python - How to create jsonb index using GIN on SQLAlchemy? -

c# - TransactionScope not rolling back although no complete() is called -