CSS layout on HTML5 - css

Question

I am developing one web application in HTML5 and js. And I am using some 'Canvas' tags in it. So I would like to structure them on the screen like:
I have achieved it by using such CSS tags as: margin-right, margin-left, top, position.
The problem is when I use these css tags, then I am more or less adapting the whole layout to one screen only, unfortunately my aim is to support any screen possible.
Maybe there are professionals in layouting who could help with this particular problem.
P.S. When window size is changed, canvases should not be resized

Answer 1

Maybe its a good idea to use a css framework like twitter bootstrap.
Its build up for different screen sizes and crossbrowser. It also offers a responsive design.
Have a look at the gridsystem.
About one canvas inside another:
<div class="row">
<div class="span4">
<div class="row">
<div class="span4">..</div>
<div class="span4">.. </div>
<div class="span4">..</div>
</div>
<div class="span8">...</div>
</div>
You can do "unlimited" nesting of columns, see 'Nesting columns' in documentation linked above.

Answer 2

I have created you a demo.
I believe this is what you want.
HTML:
<div id="wrapper">
<div id="col1">
<div class="canvas">Canvas-Left-1
<div class="innercanvas">Canvas-Left-1-1</div>
</div>
<div class="canvas">Canvas-Left-2
<div class="innercanvas">Canvas-Left-2-1</div>
</div>
</div>
<div id="col2">Canvas 0</div>
<div id="col3">
<div class="canvas">Canvas-Rigt-1
<div class="innercanvas">Canvas-Right-1-1</div>
</div>
<div class="canvas">Canvas-Right-2
<div class="innercanvas">Canvas-Right-1-1</div>
</div>
</div>
</div>​
CSS
* {margin: 0; padding: 0;}
#wrapper {display: block; margin: 0 auto; width: 1000px; background-color: green; overflow: auto;}
#col1 {display: inline-block; width:200px; background-color: gray; position: relative; float: left;}
#col2 {display: inline-block; width:600px; background-color: yellow; position: relative; float: left;}
#col3 {display: inline-block; width:200px; background-color: blue; position: relative; float: left;}
.canvas {background-color: black; margin: 10px; color: white}
.innercanvas {background-color: purple; margin: 10px; color: white}​

Answer 3

Boris you would need to either implement it using outside containers for each area (ie. 3 outer-divs, one for each column, and one "main" div to position to in the middle of the screen, using percentages and max/min width to control the desired output).
Or save yourself some trouble and use a fluid grid system like those:
http://cssgrid.net/
http://www.designinfluences.com/fluid960gs/
You may want to take a look here too, there is some neat information on fluid layouts.