Align Div tags horizontally..?

[BGM]

I want to split a division of an html page again, but horizontally.. the code i have isnt doing the trick and is just putting the next <div> underneath the first one, im sure there is an easy fix.. can someone point it out to me?

.container {
	width:995px;
	height: 502px;
}
.left {
	background-color:#FF6666;
	width: 20%;
	height: 100%;
}
.right {
	background-color:#FF9900;
	width: 80%;
	height: 100%;
}

<div class="container">
                <div align="left" class="left">
                </div>
                <div align="right" class="right">
                </div>
</div>

going to look like A and not B

A)
------------------------------- 
|               |              | 
|               |              |   
|               |              |     
------------------------------- 

B)
----------------
|               |
|               |
|               |
----------------
|               |
|               |
|               |
----------------

thanks guys!!

 

[dawtips]

try

.left {
	background-color:#FF6666;
	width: 20%;
	height: 100%;
        float: left;
}
.right {
	background-color:#FF9900;
	width: 80%;
	height: 100%;
        float: right;
}

 

[BGM]

you think will do the trick?

cool.. ill try it when i get home from work, i knew there would be an easy answer

thanks!

 

[jrbryner]

I don't know if this work, but if the above doesn't you can give it a try:

.left {
	background-color:#FF6666;
	width: 20%;
	height: 100%;
	float: left;
}
.right {
	background-color:#FF6666;
	width: 80%;
	height: 100%;
	margin-left: 20%;
}