Как расположить div по разные стороны?

Есть две кнопки div:

                <div id="but1">
                    <br><a href="/index" title="Перейти к более подробной информации"><div><spans>Читать подробнее...</spans></div></a>
                </div>
                <div id="but2">
                    <br><a href="/index" title="Перейти к более подробной информации"><div><spans>Читать подробнее...</spans></div></a>
                </div>

Они расположены внутри другого div, который отвечает за оформление, т.е. типа цитаты. Вот CSS стиль кнопок:

#but1 {
    width: 180px;   
    text-align: center; 
    margin-left: 10px;  
}
#but1 div{      
    padding: 5px 9px;
    text-align: center;         
}
#but2 {
    width: 180px;   
    text-align: center; 
    margin-right: 10px;
}

#but2 div{      
    padding: 5px 9px;
    text-align: center;                         
}

Я убрал лишнее. И проблема в том, что эти обе кнопки располагаются на разных строчках. Одна сверху, другая снизу соответственно. А мне необходимо, чтобы они были на одной строке и одна слева, а другая справа. Отступы margin-left и margin-right можно потом настроить. И при этом находились в цитате, т.е. в div, в который помещены эти две кнопки. Я пробовал использоваться float, но в этом случае кнопки вылезают из цитаты. Экспериментировал и с display, но безуспешно. Подскажите пожалуйста как их разместить? Спасибо!