Search code examples
csscss-floattile

CSS: tile boxes which come with irregular heights

I want to tile boxes to look like this picture below,

alt text

which all the boxes have the same width and height, accept one of them I need to change its height to 500px for certain occasions. But I cannot make it right!

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 markups,

<!-- 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 -->

it would be fantastic if you know the tricks! thanks!

Solution

  • I think, it will be easier for you to declare two column containers separately and not mix all 7 elements together. An example.
    At least, this is the principle I usually employ: container can be split 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>