CSS Positioning 70-30 with Inline-Block

Question

I am positioning main-bar and side-bar with 70-30 ratio as under: JSFIDDLE

Answer 1

 .main-bar, .side-bar{
            position: relative;
            margin:0; padding: 0;
            outline: 0;
            display: inline-block;
            border:0;
            background:#CCC;
            float:left;
        }

Inline elements:

1. respect left & right margins and padding, but not top & bottom

2. cannot have a width and height set

3. allow other elements to sit to their left and right.

Block elements:

1. respect all of those
2. force a line break after the block element.