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

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}​