Can't align my DIVs next to each other - css

Question

For some reason I can't align my divs next to each other. "Right" goes under "left"
What is wrong with my code?
HTML:
<div id="activity-container">
<div id="activity-left">left</div>
<div id="activity-right">right</div>
</div>
CSS:
#activity-container
{
width:90%;
background-color:#FFFF00;
Height:400px;
margin-left: auto;
margin-right: auto;
}
#activity-left {
border: 1px solid black;
color:#000;
margin: 0 auto;
width: 20%;
float: left;
position: relative;
}
#activity-right {
border: 1px solid black;
margin: 0 auto;
color:#000;
width: 80%;
float: left;
position: relative;
}
Live demo: Tinkerbin

Answer 1

Your borders on the div-s adding 2px to their width. Remove them and they will be next to each other - jsFiddle
If you really need the borders, then mimic them with outline - jsFiddle
#activity-left {
outline: 1px solid #000;
color:#000;
margin: 0 auto;
width: 20%;
float: left;
position: relative;
}
#activity-right {
outline: 1px solid #000;
margin: 0 auto;
color:#000;
width: 80%;
float: left;
position: relative;
}​

Answer 2

You only need to remove float and margin properties from CSS
#activity-right
{
border: 1px solid black;
color: #000;
width: 80%;
position: relative;
}
Than it will work as per your expectation.

Answer 3

If you want to retain the border, you can try changing the width:
#activity-container
{
width:90%;
background-color:#FFFF00;
Height:400px;
margin-left: auto;
margin-right: auto;
}
#activity-left {
border: 1px solid black;
color:#000;
margin: 0 auto;
width: 19%;
float: left;
position: relative;
}
#activity-right {
border: 1px solid black;
margin: 0 auto;
color:#000;
width: 80%;
float: left;
position: relative;
}
Check Jsfiddle