CSS: Make divs side by side

I'm in the process of making a website for myself and in it I need two divs to sit next to each other. You can see what I have right now here (http://skilar.com/c/). I would like the "My Scores" and "Items to Add" divs to sit side by side, not one under another. I looked into this a little bit, and tried the float attribute, but this (http://skilar.com/c/messed.html) is what happened. Obviously this isn't what I'm looking for. I'm not sure what is going on in my code that makes that happen, but I was wondering if anyone else could spot where I went wrong and how I could fix it. Thanks in advance!

WARNING: This site will look terrible in IE since it's only for my use and I don't plan on using it outside of Firefox.

I got ya, here:

Change your code to this (or add "float:left;" to your "topbox" definition and add the clear:both div style under your floating divs)


<div class="topbox" style="float:left;">
<h3>My Scores</h3>
<ul>
<li><strong>ACT:</strong> 30 on June 10, 2005</li>

<li><strong>SAT:</strong> 1830 on , 2005</li>
</ul>
</div>

<div class="topbox" style="float:left;">
<h3>Items to Add:</h3>
<ul>

<li>Dorm commodities</li>
<li>SAT Date</li>
</ul>
</div>
<div style="clear:both; font-size:0px;">&nbsp;</div>


The most important things (the things I added) are the float:left to your divs' style and the <div style="clear:both;"></div> line. This clears the floating boxes and starts what comes under it on a new line, so to speak.

It worked for me,
Try it and see, I guess.

-Rege

Awesome! It worked perfectly! Thanks so much.