CSS layout on HTML5 -
i developing 1 web application in html5 , js. , using 'canvas' tags in it. structure them on screen like: 
i have achieved using such css tags as: margin-right, margin-left, top, position. problem when use these css tags, more or less adapting whole layout 1 screen only, unfortunately aim support screen possible.
maybe there professionals in layouting particular problem.
p.s. when window size changed, canvases should not resized
i have created demo.
i believe this 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}
Comments
Post a Comment