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:
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
Comments
Post a Comment