html - css display table cell made right cell move down -
<style> #middle .institutions { width:100%; display:table; } #middle .institutions .institution { width:100%; display:table-row; } #middle .institutions .institution .institution-image { display:table-cell; width:50%; } #middle .institutions .institution .degree { display:table-cell; width:50%; } </style> <body> <div id="middle"> <div class="institutions"> <div class="institution"> <div class="institution-image"> <img src="jntuk.png" ></img> </div> <div class="degree"> <p class="name">rochester institute of technology</p> <p>master's - info technology</p> <p>gpa:3.50</> <a href="http://www.rit.edu" target="_new">www.rit.edu</a> </div> </div> </div> </body>
i dont want utilize floats reason. can help me link screenshot-https://drive.google.com/file/d/0b4fkxrwc2y_ctfrzquhwzk9ouvu/view?usp=sharing
you can prepare adding: vertical-align: top;
#middle .institutions .institution .degree { display:table-cell; vertical-align: top; width:50%; } here's link fiddle: http://jsfiddle.net/ayxg0x8j/
html css html5 css3
No comments:
Post a Comment