[CSS] div met dynamic width

[paidur]

Hallo mensen, ik heb een probleempje met mijn div's, en ik kom er maar niet uit hoe ik het op moet lossen. De oplossing is vast simpel, maar ik heb al van alles geprobeerd, en niets werkt.

Het probleem is als volgt, ik heb deze situatie:



De witte blokjes zijn divs die gegenereerd worden per wordpress post (noem ze in het verdere verhaal 'postblokjes', en stretchen horizontaal naar de inhoud (de titel van de post). nu wil ik rechts van deze blokjes een div die zich helemaal naar rechts vult over de rest van het scherm, zodat ik de background van die div op wit kan zetten, en er een langgerekte balk ontstaat. De margin-right van de postblokjes animeer ik met jquery. Zo zal het eerst een volledig gevulde witte balk zijn (margin-right:0), wanneer er op wordt geklikt animeer ik de margin-right naar een aantal pixels, zodat er blokjes zichtbaar worden. De te bouwen div moet zich hier dus ook automatisch bij aanpassen qua width.
Daar komt nog bij dat het aantal posts en de breedte van deze posts variabel is, en de schermresoluties natuurlijk ook. Iemand enig idee hoe ik dit zou kunnen oplossen?

relevante code:

JavaScript:

<script type="text/javascript">
    $(document).ready(function() {
        $(".mainmenu-overlay").click(function() {
            $(this).fadeOut('slow', function() {
                $("#automotive > .menu-item").animate({
                    marginRight: '20'
                }, 500, function() {
                    $("#automotive > .menu-item").animate({
                        height: '250'
                    }, 500, function() {
                        //animation complete    
                    });     
                }); 
            });
            
        });
    });
</script>

HTML:

<div id="automotive" class="mainmenu-item">
    <a href="#"><div class="mainmenu-overlay">automotive design</div></a>
    <?php query_posts( 'cat=3' );
    if (have_posts()) :
    while (have_posts()) :  the_post();?>
    <div class="menu-item">
        <?php the_title();?>
    </div> 
    <?php endwhile;
    endif;?>
</div> <!-- automotive -->

Cascading Stylesheet:

.mainmenu-item {
    height:auto;
    width:100%;
    margin:40px 0px;
    overflow:hidden;
}
.mainmenu-overlay{
    height:80px;
    position:absolute;
    width:100%;
    z-index:10;
    background-color:white;
}
.menu-item{
    height:80px;
    background-color:white;
    position:relative;
    display:block;
    float:left;
    z-index:1;
}

edit: kleine toevoeging

[ Voor 3% gewijzigd door paidur op 14-01-2012 13:58 ]

[paidur]

uiteindelijk de oplossing gevonden: een wrapper rond de menu-items met een zeer grote breedte (bijv 4000px), en achter de menuitems een links gefloate div van bijv 3000px, hoe simpel kan het zijn, maar hoe ontzettend lang kan je er soms ook mee bezig zijn...

mag dus op slot

[ Voor 3% gewijzigd door paidur op 15-01-2012 13:24 ]

[RobIII]

Een slotje is niet nodig op een topic als je je oplossing hebt. Zie daarvoor ook onze faq betreffende topiceinde.