CSS: Ayuda con la alineación div (ampliar - colapso) cajas lado de la otra

StackOverflow https://stackoverflow.com/questions/2478290

Pregunta

Estoy teniendo algunos problemas con la alineación de dos cajas div uno junto al otro ;. O más correctamente, he alineado mis dos cajas de “cabeza” al lado del otro, pero mi problema es que yo los estoy usando como un contenedor ampliar colapso y esas cajas no se alineará correctamente.

Estoy publicar el código completo debajo y estaría muy agradecido si alguien tenía una solución a este problema, que probablemente no es tan difícil. Y otro problema es, que cuando amplío el área oculta las dos cajas "restablece" una y otra vez de pie debajo de los otros. 

<html>
<head>

<!-- Panel Slider for Contact -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

 <!-- Expand Collapse -->
    <script type="text/javascript">$(function(){
$("#mostrar1").click(function(event) {event.preventDefault();
                $("#caja1").slideToggle();
                });

$("#caja1 a").click(function(event) {event.preventDefault();
                $("#caja1").slideUp();
                });
$("#mostrar2").click(function(event) {event.preventDefault();
                $("#caja2").slideToggle();
                });

$("#caja2 a").click(function(event) {event.preventDefault();
                $("#caja2").slideUp();
                });
}); </script> 

<style type="text/css">
.slide-out-div {
       padding: 20px;
       width: 250px;
       background: #031F2F;
       margin: 0px;

    }

            #caja1 {
            width:30%;
            display: none;
            padding:5px;
            border:2px solid #FFFFFF;
            background-color:#99a8ff;
            }

            #mostrar1{
            display:block;
            width:30%;
            padding:5px;
            border:2px solid #FFFFFF;
            background-color:#0C415F;
            float: left;
            color: #FFFFFF;
            }           

            #caja2 {
            width:30%;
            display: none;
            padding:5px;
            border:2px solid #FFFFFF;
            background-color:#99a8ff;
            }

            #mostrar2{
            display:block;
            width:30%;
            padding:5px;
            border:2px solid #FFFFFF;
            background-color:#0C415F;
            float: left;
            color: #FFFFFF;
            }           
            }   

</style>
</head>
<body>

        <a href="#" id="mostrar1">Private</a><div style="display: none;" id="caja1"><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><a href="#" id="mostrar2">Erhverv</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>        
</body>
</html>

Gracias Mestika

¿Fue útil?

Solución

Esto funcionó para mí en 3.7a Firefox. Dos cosas han cambiado: se ha añadido un tipo de documento y se envuelven cada columna en una envoltura. clase contenedora probablemente podría llamarse algo más semántica, eso depende de usted. 

<!DOCTYPE html>
<html>
<head>

<!-- Panel Slider for Contact -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

 <!-- Expand Collapse -->
    <script type="text/javascript">$(function(){
$("#mostrar1").click(function(event) {event.preventDefault();
                $("#caja1").slideToggle();
                });

$("#caja1 a").click(function(event) {event.preventDefault();
                $("#caja1").slideUp();
                });
$("#mostrar2").click(function(event) {event.preventDefault();
                $("#caja2").slideToggle();
                });

$("#caja2 a").click(function(event) {event.preventDefault();
                $("#caja2").slideUp();
                });
}); </script>

<style type="text/css">
.wrapper {
    width: 30%;
    float: left;
}
.slide-out-div {
       padding: 20px;
       width: 250px;
       background: #031F2F;
       margin: 0px;
    }

            #caja1 {
            display: none;
            padding:5px;
            border:2px solid #FFFFFF;
            background-color:#99a8ff;
            }

            #mostrar1{
            display:block;
            padding:5px;
            border:2px solid #FFFFFF;
            background-color:#0C415F;
            color: #FFFFFF;
            }

            #caja2 {
            display: none;
            padding:5px;
            border:2px solid #FFFFFF;
            background-color:#99a8ff;
            }

            #mostrar2{
            display:block;
            padding:5px;
            border:2px solid #FFFFFF;
            background-color:#0C415F;
            color: #FFFFFF;
            }

</style>
</head>

<body>

<div class="wrapper">
<a href="#" id="mostrar1">Private</a><div style="display: none;" id="caja1"><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>
</div>
<div class="wrapper">
<a href="#" id="mostrar2">Erhverv</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>
</div>
</body>
</html>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top