How can I space out my DIVs to stop overlap?

I have been working for over a day trying to get some DIVs to display correctly. Now I'm half way there but I still have a spacing problem. I created a fiddle . The problem is that the buttons overlap.

Can anyone provide some advice on this. I don't know how I can space between the rows of buttons.

Here is the code I have:

<div class="sbr_bdy">
  <div class="sbr_qu">
    <div><a class="qu" href="1" title="Go to queue 1" >1</a></div>
    <div><a class="qu" href="2" title="Go to queue 2" >2</a></div>
    <div><a class="qu" href="3" title="Go to queue 3" >3</a></div>
    <div><a class="qu" href="1" title="Go to queue 1" >1</a></div>
    <div><a class="qu" href="2" title="Go to queue 2" >2</a></div>
    <div><a class="qu" href="3" title="Go to queue 3" >3</a></div>
    <div><a class="qu" href="1" title="Go to queue 1" >1</a></div>
    <div><a class="qu" href="2" title="Go to queue 2" >2</a></div>
    <div><a class="qu" href="3" title="Go to queue 3" >3</a></div>
    <div><a class="qu" href="1" title="Go to queue 1" >1</a></div>
    <div><a class="qu" href="2" title="Go to queue 2" >2</a></div>
    <div><a class="qu" href="3" title="Go to queue 3" >3</a></div>
    <div><a class="qu" href="1" title="Go to queue 1" >1</a></div>
    <div><a class="qu" href="2" title="Go to queue 2" >2</a></div>
    <div><a class="qu" href="3" title="Go to queue 3" >3</a></div>
  </div>
</div>

.sbr_bdy { padding:0px 15px; xoverflow: hidden;}
.sbr_bdy { background: #666699; }
.sbr_qu   { background: #336699;
    xpadding-bottom:2px; display:inline; float: left; }
.sbr_qu div  {     float: left; padding:5px;
                          -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px; }

.sbr_qu a { padding:15px; color:blue;  text-decoration: none;
    border: 2px solid #666;
    background: #ddd;
    xpadding: 2px;
    xmargin: 1px;
    color: #000;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
}

Since it appears there are a decent number of things going off-target with the code, I cleaned it up a lot. [Here is a fiddle] with a very cleaned up version of what I think you're trying to get. Or below is the working code.

(OR just for fun, after cleaning it up, I tweaked it a bit w/ rollovers rounded edges...etc Hope you like it ;) ["Extra" example here]

HTML:

<div class="sbr_qu">
    <a href="1" title="Go to queue 1" >1</a>
    <a href="2" title="Go to queue 2" >2</a>
    <a href="3" title="Go to queue 3" >3</a>
    <a href="1" title="Go to queue 1" >1</a>
    <a href="2" title="Go to queue 2" >2</a>
    <a href="3" title="Go to queue 3" >3</a>
    <a href="1" title="Go to queue 1" >1</a>
    <a href="2" title="Go to queue 2" >2</a>
    <a href="3" title="Go to queue 3" >3</a>
    <a href="1" title="Go to queue 1" >1</a>
    <a href="2" title="Go to queue 2" >2</a>
    <a href="3" title="Go to queue 3" >3</a>
    <a href="1" title="Go to queue 1" >1</a>
    <a href="2" title="Go to queue 2" >2</a>
    <a href="3" title="Go to queue 3" >3</a>
    <div id="anything"></div>
</div>

CSS:

.sbr_qu   {
    background-color: #336699;
    padding: 2px;
    }
.sbr_qu a {
    float: left;
    padding:15px;
    text-decoration: none;
    border: 2px solid #666;
    background-color: #ddd;
    margin: 2px;
    color: #000;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    }
#anything { clear: both; }

That's just because your A elements are bigger than DIV's. All you need is to add float:left to A elements so they will define DIV's height.

http://jsfiddle.net/78Uhk/1/

I have edited it. One might say its crude. But CLICK HERE

And there are no css attributes called "xoverflow" or "xmargin" or "xpadding" in case you have intentionally typed that.