Positioning Divs without floats

I have been used to using floats in order to do layout, and have two divs sit next to each other, similar to columns. But, I am wondering if this is not the best method, and if there is a better solution. My method falls apart because I am always having to clear my floated divs, and it sometimes does not work well in IE6. Is there a better way to position divs next to each other using position: relative? I have been playing with it, but I am unsure how to acheive the same thing and floating two divs to the left. Do I need to make the parent div absolute, and then the children relative?

Here is what I am using:

[code=html]<div id=”outer”>Outer
<div id=”left”>Left</div>
<div id=”right”>Right</div>
</div>[/code]

[code=html]#outer {background-color: #000; position: absolute; width: 400px; height: 400px;}
#left {background-color: #e37a49; position: relative; top: 0; left: 0; width: 50px;}
#right {background-color: #68fe91; position: relative; top:0px; left: 60px; width: 50px;}[/code]

It did not turn out how I expected. Also, what are the browser compatability issues with using this method?

Also in #CSS _↴