Put divs like rulers on left and top w/jsfiddle.net - html

Question

I have a problem implementing this schema:
Here is a jsfiddle: http://jsfiddle.net/ptCoder/3WB32/
The "Bar 2" need to be rotate in vertical:
transform: rotate(90deg);
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Safari and Chrome */
Can anyone help me?
Thank You.

Answer 1

You could fudge something like this together DEMO http://jsfiddle.net/kevinPHPkevin/3WB32/5/
<div class="container">
<div id="hbar">Bar 1</div>
<div id="vbar">Bar 2</div>
<canvas id="c" width="400px" height="400px">CANVAS</canvas>
</div>

Answer 2

Below is a custom approach I've built, it personally makes more sense to me to do it this way. You can see how it functions / looks by clicking on the example on the bottom.
The HTML:
<div id="wrapper">
<div id="bar-1">
<p>Bar 1</p>
</div>
<div id="bar-2">
<p>Bar 2</p>
</div>
<div id="canvas">
This is the canvas
</div>
</div>
The CSS:
#wrapper{
min-height: 500px;
position: relative;
background: #ccc;
}
#bar-1{
position: absolute;
left: 100px;
right: 100px;
background: blue;
height: 100px;
}
#bar-2{
position: absolute;
top: 100px;
background: red;
bottom: 100px;
width: 100px;
}
#canvas{
position: absolute;
top:100px;
left: 100px;
background: yellow;
bottom: 100px;
right: 100px;
}
Click here for a working example of the above code:

Answer 3

You are giving same class to both div
<div id="hbar" class="hbar">Bar 1</div>
<div id="vbar" class="hbar">Bar 2</div>
change second one to vbar