Align div boxes next to each other

Question

Hi everyone,

I’ve two div boxes that I’m using as a expand-collapse with some javascript but the problem is that they currently are align underneath each other. I would like to have them next to each other instead but I’ve run into a wall.

My styles look like this:

<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>

And my HTML look likes this:

<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>

I’ve tried with float:left; but they are not entirely align next to each other but with the box 2 (MOSTRAR 2) is just a couple of pixels underneath box 1 (MOSTRAR 1).

And of cause I need the caja and caja2 to be aligned as well for the expand-collapse function to work.

Thanks Mestika

Answer 1

I deleted all the code irrelevant to your question and was left with this, which behaves as expected:

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

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

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

Answer 2

They don't align because you have a <br> in there before the link with id=mostrar2

Add float: left. Delete the <br>. It works as expected.