RandomNoob RandomNoob - 1 year ago 70
CSS Question

Table layout - text does not stay on the top of div

I created simple layout with two table-cells. When i add iframe with map, the text in the red div moves under that map, but i wanna that it stays on the top. What m i doing wrong here?
Thank you.



<div class="container">
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247!3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1385710909804" width="100%" height="100%" frameborder="0" style="border:0"></iframe>
<div class="block">


.container {
display: table;
width: 100%;
height: 100%;

.map {
background-color: blue;
display: table-cell;
.block {
background-color: red;
width: 300px;
display: table-cell;

Answer Source

Add vertical-align: top to .block. Updated fiddle

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download