CSS: tiles with irregular heights

Question

I want to mark the boxes so that they look like this:

which has all the fields of the same width and height, accept one of them, I need to change its height to 500 pixels for certain cases. But I can’t fix everything!

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

here is my 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; } 

and my markup

 <!-- 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 standard dummy Lorem Ipsum has been the industry standard dummy Lorem Ipsum has been the industry 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 standard dummy Lorem Ipsum has been the industry standard dummy Lorem Ipsum has been the industry 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 standard dummy Lorem Ipsum has been the industry standard dummy Lorem Ipsum has been the industry 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 standard dummy Lorem Ipsum has been the industry standard dummy Lorem Ipsum has been the industry 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 standard dummy Lorem Ipsum has been the industry standard dummy Lorem Ipsum has been the industry 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 standard dummy Lorem Ipsum has been the industry standard dummy Lorem Ipsum has been the industry standard dummy</p> <a href="#" class="button-plus"><span>more</span></a> </div> <!-- item-global --> 

It would be great if you knew the tricks! thanks!

Answer 1

I think it will be easier for you to declare two containers for columns separately, rather than combine all 7 elements. An example .
At least this is the principle that I usually use: the container can be divided into subcontainers horizontally or vertically, but not in both directions together.

 <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

How about adding:

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

Works in Firefox 3.6.8.