Grid Display With CSS Float Left
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.
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
Anonymous (not verified)
Wed, 11/16/2011 - 23:30
Permalink
Um... this post is wrong
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.
admin
Mon, 12/19/2011 - 11:14
Permalink
Thanks
That's my bad. Thanks for your correction, I just updated the article.
Suwondo (not verified)
Mon, 07/16/2012 - 09:52
Permalink
Wah, tinggal ngasih paging
Wah, tinggal ngasih paging aja nich ...... bisa nampilin daftar produk secara lebih manis.... Thanx
Add new comment