css - Three divs next to eachother, content pushing others down -
i've got 3 divs next eachother , without content in them align perfect. once place div inside first one, other 2 (middle , right) pushed down. inner div smaller parent (the left one), don't see why it's pushing down.
this global wrapper:
.main-content { width: 1100px; min-height: 500px; margin: auto; margin-top: 100px; }
the left div:
.left-menu { width: 250px; height: 100%; margin-left: 20px; margin-top: 30px; background-color: rgba(255, 255, 255, 0.95); display: inline-block; }
the middle:
.main { width: 500px; min-height: 500px; background-color: rgba(255, 255, 255, 0.95); display: inline-block; margin-left: 20px; }
and right div:
.right-pane{ width: 250px; margin-left: 15px; margin-top: 30px; background-color: rgba(255, 255, 255, 0.95); display: inline-block; }
at moment classes rather id's, shouldn't make difference guess?
now once place div following inside left-menu other 2 pushed down:
<div class="leftmenu-item"> <p class="redtext">this quite long sentence hehehe</p> <p class="datetext">date: 25-07-2013</p> <p class="timetext">time: 13:00</p> </div>
css:
.leftmenu-item { height: 100px; width: 200px; }
the other classes of paragraphs set font type , color.
so whole structure looks this:
<div class="main-content"> <div class="left-menu"> <div class="leftmenu-item"> <p class="redtext">this quite long sentence hehehe</p> <p class="datetext">date: 25-07-2013</p> <p class="timetext">time: 13:00</p> </div> </div> <div class="main"> testy </div> <div class="right-pane"> hello. </div> </div>
i've tried using float, not working either. if knows solution, i'd happy
add vertical-align:top;
div.
by default aligned baseline.
Comments
Post a Comment