How can I make my DIVs flow?

I have the code below. I would like to get the <a>'s to follow each other horizontally but now they just go below each other. Is there a way I can make them go one after each other horizontally?

<div class="sidebar_content">
        <div class="si开发者_StackOverflow社区debar_question">
                <div>
                    <a class="q" href="1" title="Go to queue 1" >1</a>

                </div>
                <div>
                    <a class="q" href="2" title="Go to queue 2" >2</a>
                </div>
                <div>
                    <a class="q" href="3" title="Go to queue 3" >3</a>
                </div>
        </div>

    </div>

and

.sidebar_q   { xpadding-bottom:2px; display:inline; float: left; }
.sidebar_q div  {     float: lef; padding:5px;
                          -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px; }

.sidebar_q 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;
}

I made this fiddle

.sidebar_q div  {     float: lef; // <-- YOUR ARE MISSING THE t from left

your updated fiddle at http://jsfiddle.net/gaby/CTzqU/1/

Maybe change:

.sidebar_q div  {     float: lef; padding:5px;

to

.sidebar_q div  {     float: left; padding:5px;

The default display attribute setting is "block" for a div. So if you don't specify any settings for a "div" it is as though you set it to display:block. This means that every div will set vertically, like you see now.

The way to make them display horizontally is to use <span> instead of div for your inner sections, or modify display: to something like display:inline.