html - <div> to the right is pushed lower by the content of the left <div> -


demo of problem
kind of solved problem

it kind of solved because want able have divs different sized content

edit: need way make these divs don't interact while behaving same way

first, image: reference image

and code:

so have 2 divs positioned next each other css:

.horizontal { position: relative; min-height: 100%; height: auto !important; height: 100%; width: 100%; display: inline-block; overflow: hidden; 

the div on left has spacer this:

.tspacer { width:100%; height:110px; 

it has iframe, html left div:

<div id="home" class="horizontal" style="font-family: 'press start 2p', cursive;"> <center><img src="img/light.png" class="home-light" /></center> <div class="tspacer"></div> <iframe src="iframe/home_slider.html" width="100%" height="300px" frameborder="0"></iframe> </div> 

and div on right has text:

<div id="ent" class="horizontal" style="background-color:#f00"> entertainment </div> 

finally, heck need:

i need make entertainment div snap top of page. page contains grid of divs (click here more on that) , reason other divs in next rows , columns being pushed down content of first (i think) thing confuses me slider has shadow inside iframe , right div seems start in middle of that. anyway, why wont line in normal, not offset, grid.

i believe you're missing vertical-align:top in .horizontal class

updated fiddle


Comments

Popular posts from this blog

c# - Send Image in Json : 400 Bad request -

jquery - Fancybox - apply a function to several elements -

An easy way to program an Android keyboard layout app -