javascript - how to "stabilize" a div -
i have div in right side of page , header on top, e.g:
so have div of menu , wrapped in div, setting float right, additionally, before menu div have header div on top. i'm trying make 2 sections 1 of them should iframe (don't shoot me please),
whenever try add other divs, either menu getting on top of them or placed underneath end of menu. want that:
this part of code:
<div id="header"> <h1>pre-test</h1> </div> <div id="wrap" style="right: 0;height: 100%; width: 100%; position: absolute; overflow-y: scroll;"> <div id='cssmenu'> <ul> <li class='active'><a href='#'><span>home</span></a></li> <li class='has-sub'><a href='#'><span>products</span></a> <ul> <li><a href='#'><span>product 1</span></a></li> <li><a href='#'><span>product 2</span></a></li> <li><a href='#'><span>product 3</span></a></li> </ul> </li> ... </div> </div> <div class="two_main_frames"> <div class="main_right_frame"> <iframe src="http://www.amazon.com"> </iframe> </div> </div>
and css:
.two_main_frames { direction: rtl; width: 80%; /*height: 100%;*/ } .main_right_frame { width: 50%; height: 100%; overflow-y: scroll; font-size: 14px; float: right; direction: rtl; clear: both; }
you can check out code on here: http://jsfiddle.net/xqgsm/124/
p.s: don't know if has when open in mp phone shows pretty messed up. there way fix too? thanks.
for messed mobile display it's b/c haven't coded site responsive. simply, using css framework bootstrap or html5 boilerplate take care of you.
Comments
Post a Comment