Hi everybody,
I am having some trouble with aligning two div boxes next to each other;. Or more correctly, I have aligned my two “head” boxes next to each other but my problem is that I am using them as a expand-collapse container and those boxes will not align correctly.
I am posting the entire code beneath and would be grateful if someone had a solution to this problem, which probably is not that difficult. And another problem is, that when I expand the hidden area the two boxes "resets" and again stand under each other.
<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>
Thanks Mestika