How to align two div panels horizontally

Question

I've created two div and aligned them left and right using css inline property, the problem is that I can't set the width and height in percentage (not in pixel value), I've seen some alternatives of this question but I didn't get the solution yet,

This is what i want :

Here is a fiddle: http://jsfiddle.net/6JgNu/ (I've used the pixel values to set height instead of percent). please update it with height in percentage value.

Here is the code :

<style type="text/css">
.left-panel
{        
    background-color:#ccc;
    width:10%;
    height:100px;            
}
.right-panel
{        
    background-color:Gray;
    width:90%;
    height:100px;
}

First panel Second panel

Any help gratefully received!

Answer 1

Use float:left

.left-panel
{        
    background-color:#ccc;
    width:10%;
    height:100px;
    float:left;            
}
.right-panel
{        
    background-color:Gray;
    width:80%;
    height:100px;
    float:left;
}​

Demo: http://jsfiddle.net/6JgNu/5/

Answer 2

Just add float:left; to .left-panel. Hope this helps - good luck.