HTML5 “fixated” floating DIVs?

Question

I'm having aa hard time putting this question down in keywords so I was unable to check for duplicates and such, I apologize in advance.

I'm trying to write my first HTML5 page, and I noticed through the preview that, if I reduce the browser window size, the DIVs will move from their positions trying to fit into the smaller space, making a mess of everything. I'd like for everything to remain fixated just like in fullscreen mode, eventually popping horzontal/vertical scrollbars for navigation , namely what happens with 99% of the web pages I ever stumbled upon.

I suspect the issue is with the "float" style I use, since "floating" sounds like the opposite of "fixated", but I couldn't find another way to keep DIVs side by side.

I'll add some code to 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 are the images of full screen and windowed page.

Full:

Windowed:

Answer 1

I studied some more, cleared my head and solved my issue. In case someone else could benefit from this I'll try to clarify my issue and then answer it.

There actually were TWO issues:

1) I need the page (say <body> ) width to be fixated, so it doesn't "shrink" together with the window (see pictures enclosed with the question).

2) This fixated width must be variable, depending on the user's screen width.

Number 1) would be solved by "wrapping" the body in a <div> , and declaring such <div> 's width with a constant, eg

<div id="bod" style="width:1900px">
    <body>
    (...)
    </body>
</div>

This way the page width remains the same both in full screen mode or in any windowed size, eventually popping scrollbars for navigation.

In order to solve number 2), ie fixating the <div> width to a variable depending on the screen size, I wrote a 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 the width of the selected div equal to the screen width, times a parameter, plus eventually another parameter.

So if I want to fixate the body width to 85% of the screen size (which is what I was randomly trying to do in the code I posted within my question) I still need to wrap it inside a <div> , and then call this function right before </body> as thewidth("bod",0.85,0) . I actually wanted to call this upon onload , but for some reason it wasn't firing, so I manually called it at the end of the section.

HTML5 “fixated” floating DIVs?

Question

1 answers

solution1
0 ACCPTED 2015-06-24 23:49:47

HTML5 “fixated” floating DIVs?

Question

1 answers

solution1 0 ACCPTED 2015-06-24 23:49:47

solution1
0 ACCPTED 2015-06-24 23:49:47