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

Popular posts from this blog

c++ - Delete matches in OpenCV (Keypoints and descriptors) -

java - Could not locate OpenAL library -

sorting - opencl Bitonic sort with 64 bits keys -