How to align two div panels horizontally

Question

I created two divs and aligned them left and right using the css inline property, the problem is that I cannot set the width and height in percent (not in the pixel value), I saw some alternatives to this question, but I still haven't got a solution ,

This is what I want:

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

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; in .left-panel . Hope this helps - good luck.

Answer 3

Use this:

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

Answer 4

add swim left to divs and it should work

Answer 5

use this css

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