CSS: boîtes de tuiles qui viennent avec des hauteurs irrégulières

Question

Je veux des boîtes de tuiles pour ressembler à cette image ci-dessous,

qui toutes les cases ont la même largeur et la hauteur, accepter un d'entre eux j'ai besoin changer sa hauteur à 500px pour certaines occasions. Mais je ne peux pas faire les choses correctement!

http://rokhsanafiaz.co.uk/dump/1.php

voici mon code css,

* { 
    margin: 0; 
    padding: 0; 
    } 

h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,th { 
    font-size: 1em; 
    font-weight: normal; 
    font-style: normal; 
    } 

ul,ol,li { 
    list-style: none; 
    margin:0px; 
    padding:0px; 
    } 

fieldset,img { 
    border: none; 
    padding:0px; 
    margin:0px; 
    float:left; /** a must so that there is no extra gap at the bottom of each image **/ 
    } 

div { 
    clear:both; 
    border:1px solid #0066FF; 
    overflow:hidden; 
    } 

#main { 
    width:785px; 
    /**height:837px; a must for IE, to be handled in jquery **/ 
    position:relative !important; /** essential for sticking #company at bottom **/ 
    border:1px solid #000; 
    } 

#main div { 
    clear:none; 
    } 

.item-global { 
    width:335px; 
    height:146px; 
    background:#ffffff; 
    padding:15px; 
    position:relative; 
    float:left; 
    margin: 0px 15px 15px 0px; 
    } 

.item-global h3 { 
    border:0px solid #000; 
    margin:0px 0px 5px 0px; 
    } 

.item-global h3 a{ 
    font-size:20px; 
    color:#0099cc; 
    } 

.item-global p{ 
    margin:0px; 
    padding:0px; 
    font-size:14px; 
    line-height:18px; 
    clear:both; 
    } 

.item-global-current { 
    height:400px; 
    } 

et mes marges bénéficiaires,

<!-- item-global --> 
    <div class="item-global round-corner"> 

     <h3><a href="#">Topic 1</a></h3> 

     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy Lorem Ipsum has been the industry's standard dummy Lorem Ipsum has been the industry's standard dummy</p> 

     <a href="#" class="button-plus"><span>more</span></a> 

    </div> 
    <!-- item-global --> 

    <!-- item-global --> 
    <div class="item-global round-corner item-global-current" style="float:none; clear:none;"> 

     <h3><a href="#">Topic 2</a></h3> 

     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy Lorem Ipsum has been the industry's standard dummy Lorem Ipsum has been the industry's standard dummy</p> 


     <a href="#" class="button-top-minus"><span>less</span></a> 
     <a href="#" class="button-bottom-minus"><span>less</span></a> 

    </div> 
    <!-- item-global --> 


    <!-- item-global --> 
    <div class="item-global round-corner"> 

     <h3><a href="#">Topic 3</a></h3> 

     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy Lorem Ipsum has been the industry's standard dummy Lorem Ipsum has been the industry's standard dummy</p> 

     <a href="#" class="button-plus"><span>more</span></a> 

    </div> 
    <!-- item-global --> 

    <!-- item-global --> 
    <div class="item-global round-corner"> 

     <h3><a href="#">Topic 4</a></h3> 

     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy Lorem Ipsum has been the industry's standard dummy Lorem Ipsum has been the industry's standard dummy</p> 

     <a href="#" class="button-plus"><span>more</span></a> 

    </div> 
    <!-- item-global --> 


    <!-- item-global --> 
    <div class="item-global round-corner"> 

     <h3><a href="#">Topic 5</a></h3> 

     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy Lorem Ipsum has been the industry's standard dummy Lorem Ipsum has been the industry's standard dummy</p> 

     <a href="#" class="button-plus"><span>more</span></a> 

    </div> 
    <!-- item-global --> 

    <!-- item-global --> 
    <div class="item-global round-corner"> 

     <h3><a href="#">Topic 6</a></h3> 

     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy Lorem Ipsum has been the industry's standard dummy Lorem Ipsum has been the industry's standard dummy</p> 

     <a href="#" class="button-plus"><span>more</span></a> 

    </div> 
    <!-- item-global --> 

ce serait fantastique si vous connaissez les astuces! Merci!

Answer 1

Je pense qu'il vous sera plus facile de déclarer deux conteneurs de colonnes séparément et de ne pas mélanger les 7 éléments ensemble. An example.
Au moins, c'est le principe que j'utilise habituellement: le conteneur peut être divisé en sous-conteneurs horizontalement ou verticalement, mais pas dans les deux sens.

<div class="column"> 
    <div class="normal">1</div> 
    <div class="normal">3</div> 
    <div class="normal">4</div> 
</div> 
<div class="column"> 
    <div class="large">2</div> 
    <div class="normal">5</div>  
</div> 

Answer 2

Que diriez-vous d'ajouter:

.item-global-current + div { margin-top:-195px; } 

Works dans Firefox 3.6.8.