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
