Совместите поля div рядом друг с другом

Question

У меня есть два блока div, которые я использую как развёртывание-свертывание с некоторым javascript, но проблема в том, что они в настоящее время выровнены друг под другом. Я бы хотел, чтобы они были рядом друг с другом, но я столкнулся со стеной.

Мои стили выглядят так:

<style type="text/css">
body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 11px;
 color: #666666; 
}
a{color:#993300; text-decoration:none;}
#caja, #caja2 {
width:30%;
display: none;
padding:5px;
border:2px solid #FADDA9;
background-color:#FDF4E1;
}

#mostrar, #mostrar2{
display:block;
width:30%;
padding:5px;
border:2px solid #D0E8F4;
background-color:#ECF8FD;

}
</style>

И мой HTML выглядит так:

<a href="#" id="mostrar">MOSTRAR</a>

<div style="display: none;" id="caja">
<a href="#" class="close">[x]</a>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren</p>
</div>
<br>
<a href="#" id="mostrar2">MOSTRAR 2</a>

<div style="display: none;" id="caja2">
<a href="#" class="close">[x]</a>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren</p>
</div>

Я пробовал с float:left;, но они не полностью выровнены рядом друг с другом, но с рамкой 2 (MOSTRAR 2) всего пара пикселей под рамкой 1 (MOSTRAR 1).

И, разумеется, мне нужно выровнять caja и caja2, чтобы сработала функция растяжения-коллапса.

Спасибо Mestika

Answer 1

Они не выравниваются, потому что у вас есть <br> перед ссылкой с id = mostrar2

Добавить float: left. Удалить <br>. Работает как положено.

Answer 2

Я удалил весь код, не относящийся к вашему вопросу, и остался с этим, который ведет себя как ожидалось:

<style type="text/css">
    #one, #two {
        float: left;
    }
</style>

<div id="one">CAJA</div>

<div id="two">CAJA2</div>