CSS alignment Problem

[Heero]

Here is a screen of what I have right now:

[img src=\"http://www.sfu.ca/~fcc/screen.jpg\" border=\"0\" alt=\"IPB Image\" /]

Notice how none of the borders on the right side are aligned to each other. My question is how do I make it so that they all line up.

Basically, it is just 3 div elements. One on top, and then two div elements on the bottom. The two on the bottom both float to the left. I am using relative position. It just that when I try to make the width cumlative up to 100% on the bottom, the right div elements goes onto another row. Like this:

[img src=\"http://www.sfu.ca/~fcc/screen2.jpg\" border=\"0\" alt=\"IPB Image\" /]

Like what is the best way to approach this?