Mar 27, 2012

CSS display inline-block set height and width

Usually when you want a horizontal list, you need to use float in the CSS code to make it work, with all its drawbacks and sometime it wouldnt give you what you want. I have this problem quite some time, before this I'm using table but when it is involved scripting like php, CSS will help you. However when the horizontal list is image and title or words, the arrangement is not align very well.

This is what you want:


This is when the image float is broken:


image courtesy : http://blog.mozilla.com/



I'm using fix height and width in CSS so that the image float is sorted and arrange perfectly (at least nice to see), and also hidden for overflow image.


.latestphotos {
clear:both;
width:744px;
background:#f6f6f6;
margin:0px 5px 10px 0;
padding:7px 0 7px 4px;
overflow:hidden;
height:100%;
}

.latestphotos ul {
margin:0 0 0 1px;
padding:0;
}

.latestphotos ul li {
margin:0 5px 0px 0px;
padding:0;
display:inline;
list-style:none;
float:left;
width:218px;
height:250px;
}

0 COMMENT :

Post a Comment

Related Posts with Thumbnails