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
Post a Comment