StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You are correct, the page in your supplied example is not using plain css, but uses javascript to render the css on window resize.</p> <p>A line from your example (with inline styling in the html output):</p> <pre><code><div id="treeWindow" class="panel" style="height:380px;width:200px;"> </code></pre> <p>So all the measures in the example document styling are assigned with absolute units - in px, and do not adjust on browser window resize. So in terms to resize it uses something like</p> <pre><code>var clientWidth=jQuery(window).width(); var leftWidth=parseInt(clientWidth*0.25); </code></pre> <p>to get the new browser window width and similar for hight</p> <pre><code>var clientHeight=jQuery(window).height()-48; var treeHeight=parseInt(clientHeight-5); </code></pre> <p>and the function</p> <pre><code>function resizeGuiWindow(windowName,newWidth,newHeight,window){ resizePanelTo(windowName,false,newWidth,newHeight); } </code></pre> <p>is then applied to the treeWindow object</p> <pre><code>resizeGuiWindow("treeWindow",leftWidth,treeHeight); </code></pre> <p>This you can find in the source code of your example page. However, you can do that all just in css, by using relative units in the style.</p> <p>Read more on responsive design, adaptive css and fluid layouts.</p> <p><strong>Edit:</strong> I posted the answer almost at the same time as Georgii. Even though he did not directly answer the question about your example page, all he says is right and he added some good sources on flexible layouts, where you can find all info to build a similar page only with css.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload