Question

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="sidebar_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

Answer 1

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

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