css float - HTML5 "fixated" floating DIVs? -
i'm having a hard time putting question down in keywords unable check duplicates , such, apologize in advance.
i'm trying write first html5 page, , noticed through preview that, if reduce browser window size, divs move positions trying fit smaller space, making mess of everything. i'd remain fixated in fullscreen mode, popping horzontal/vertical scrollbars navigation, namely happens 99% of web pages ever stumbled upon.
i suspect issue "float" style use, since "floating" sounds opposite of "fixated", couldn't find way keep divs side side.
i'll add code make examples on:
var xx=screen.availwidth; var yy=screen.availheight;<header> <h1>big title</h1> </header> <div id="twoblocks"> <div id="leftblock" style="float:left;width:85*xx/100"> <div id="lefttop"> <section> (some text here) </section> </div> <div id="leftbottom"> <section> (more text here> </section> </div> </div> <div id="rightblock" style="float:right;width:10*xx/100"> <div id="rightbar"> <ul> (list items here) </ul> </div> </div> </div>thanks in advance.
here images of full screen , windowed page.
full:
http://i62.tinypic.com/29z5uef.png
windowed:
i studied more, cleared head , solved issue. in case else benefit i'll try clarify issue , answer it.
there 2 issues:
1) need page (say <body>) width fixated, doesn't "shrink" window (see pictures enclosed question).
2) fixated width must variable, depending on user's screen width.
number 1) solved "wrapping" body in <div>, , declaring such <div>'s width constant, e.g.
<div id="bod" style="width:1900px"> <body> (...) </body> </div> this way page width remains same both in full screen mode or in windowed size, popping scrollbars navigation.
in order solve number 2), i.e. fixating <div> width variable depending on screen size, wrote small javascript function:
function thewidth(id,m,a) { var xx = screen.width; var w = xx*m+a; document.getelementbyid(id).style.width=w+"px"; } which sets width of selected div equal screen width, times parameter, plus parameter.
so if want fixate body width 85% of screen size (which randomly trying in code posted within question) still need wrap inside <div>, , call function right before </body> thewidth("bod",0.85,0). wanted call upon onload, reason wasn't firing, manually called @ end of section.
Comments
Post a Comment