html - Why do these two div elements not align to the top using display inline block; vertical align: top? -
in below code there 2 child div elements .left , .right. im using margin left move .right right , im using display inline block make div size of content , thought getting divs align top of each other. 1 on right appears lower. why?
<style type="text/css"> html,body{ color:#fff; } .container { background: linear-gradient( right, #ff9e2c 0%, #ff9e2c 50%, #b6701e 50%, #b6701e 100% ); height: 500px; width: 100%; } .left{ width:40%; padding: 10px; vertical-align: top; } .right{ margin-left: 50%; padding: 10px; width: 40%; vertical-align: top; } </style> <section class="container"> <div class="left"> lorem ipsum dolor sit amet, consectetur adipisicing elit. sed, consequuntur.</div> <div class="right">lorem ipsum dolor sit amet, consectetur adipisicing elit. dolor similique exercitationem reiciendis doloribus animi cupiditate laborum, mollitia ipsum ad? perspiciatis?</div> </section>
you didn't have inline-block
on .left
, .right
classes. if add following works: js fiddle
.left, .right {display: inline-block;} //and change width of .right .right {width: 40%; }
this isn't how recommend setting up, example, works. recommend using separate background .left
, .right
classes instead of using gradient on wrapper. gives lot more flexibility , stability.
Comments
Post a Comment