Wrap around absolute div

[martjojo1]

Hey all,
first of all nice website.

I'm working on a code whithout page refresh using javascript fadeIn and fadeOut,
for that i'm using div's on top of eachother and they can have different heights.
because they're on top of eachother they need to have a absolute position.

<style>
.container {
width:275px;
min-height:300px;
border:1px solid #000;
position:absolute;
}

#wrapper {
//Must wrap around this div's
}
</style>

<div "wrapper">
    <div id="1" class="container">some tekst</div>
    <div id="2" class="container">some more tekst</div>
    <div id="3" class="container">some more tekst</div>
    <div id="4" class="container">some more tekst</div>
    <div id="5" class="container">some more tekst</div>
</div>

So you've probably noticed.. i need to wrap around this unknown height.
Any tips or 'you can do it else' 's?

some example in jsfiddle ( or some same site ) would be nice..

[JorgeM]

Sorry, I'm not clear. What exactly are you trying to style for the div with the id = "wrapper". While I understand that the divs within wrapper may be different heights, what you are you trying to accomplish with "wrapper"?

[martjojo1]

Well, the wrapper wil contain those div's and keep them into place, also it'll be part of the main layout like the footer beneith this wrapper or the header above it and the navigation bar etc..

http://martdesigns.netne.net/mh-designs/theme.php#

If you click 'lorem ipsup' on the left you'll see that the absolute div will stick out above the lowest div.. hope this give's you a better example of what my problem is.

[EvolutionFallen]

I assume you need the height for the wrapper div so that you can push away other elements if a div.container is a different size from the original one.

Why do you need them on top of one another though? If you are doing this to hide the ones behind, your fadeIn/Out should hide the divs anyway with display:none, so they will be taken out of the document flow. Also, if I'm not mistaken, you can overlap elements with relative positioning, so you may not need absolute positioning at all.

Also, see this thread, it might help: http://www.daniweb.com/web-development/web-design-html-and-css/threads/272504/how-do-i-get-positionrelative-elements-to-overlap

[EvolutionFallen]

OK just saw your reply. As I said, you probably don't need the absolute position. Try getting rid of it, and change your jQuery clicked1() etc. functions so that the fadeOut happens before the fadeIn. You may also want to make the fadeOut instantaneous instead of 750.

[martjojo1]

Ok, i didn't have the display function, i have it now thx..
but i'd like it to fadeout as well but that can come later, unless you have a tip.

this is the code that loads and hides:

 <script>
        $(function() {
            var count = "<?php echo $count; ?>";

            for (var i = 2; i < count; i++) {
                $('#' + i).hide();
                document.getElementById('' + i).style.display = 'none';

            }

        });

        <?php

        for($x = 1; $x < $count; $x++) {
        echo 'function clicked'.$x.'() {';
            for($y = 1; $y < $count; $y++){
                if($y == $x) {
                    echo '$("#'.$y.'").fadeIn(1000);';
                    echo "document.getElementById('". $y ."').style.display = 'block';";
                }
                else {
                    echo '$("#'.$y.'").fadeOut(1000);';
                    echo "document.getElementById('". $y ."').style.display = 'none';";
                }
            }
        echo '};';
        }
        ?>
        </script>