Would you like to be notified for every new articles? Please click HERE to subscribe for newsletter.

Grid Display With CSS Float Left

  • Posted on: 31 December 2010
  • By: admin

Float left is one of the most interesting property in CSS. By using it we can push the elements to left as far as it can. The float left property can also generate a grid display like below with a very short code.

Item 1
Item 2
Item 3
Item 4
Item 5

Grid display with float left.

The HTML code is just like this.

<-- This DIV will hold all the items -->
<div id="holder">
    <--
        Every items will be floated to left to
        produce a grid like display.
    -->
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
</div>
<div id="clearer"></div>
<-- Put the rest of page after this DIV -->
<p><i>Grid display with float left.</i></p>

And this is the CSS code.

/* The width of container DIV */
#holder{
    width:400px;
}
 
/* Style for each floated item */
.item{
    /* Give the distance for floated items */
    margin:2px 2px 2px 2px;
    float:left;
    /* Width and height for each item */
    width:100px;
    height:100px;
    /* Text align and background color */
    text-align:center;
    background-color:#cdc;
}
 
/* Clear the "float" style */
#clearer{
    clear:both;
}

The number of items for each rows can be manipulated by changing the width of the container DIV. Anyway, why do we need one DIV with clearer id? It's just for clearing the float style of the previous items. If we don't clear that float style, the content after the floated items will be placed beside them not below them. You can try it by yourself.

What can we do with that grid display? We can use it for displaying list of products in e-commerce website, image thumbnails in image gallery, and so on. It is tableless, simple, and just need a few of HTML tags.

Comments

This is completely wrong. "id" names can only be used ONCE in a document, but you use id "item" five times.

Please read the official definition of "id":
http://www.w3.org/TR/html4/struct/global.html#h-7.5.2

There is more to web development than trial-and-error in your favorite browser. Wed development has some pretty good rules which should be followed.

You were probably thinking of "class" not "id". Use class when you are talking about a possible group of objects. id is reserved to specify one specific item (for example: )

Please correct your post as someone will be misled by it.

That's my bad. Thanks for your correction, I just updated the article.

Wah, tinggal ngasih paging aja nich ...... bisa nampilin daftar produk secara lebih manis.... Thanx

Add new comment

Limited HTML

  • Allowed HTML tags: <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.