CODEWITHSUNDEEP
htmlcsscss-floathtml-lists
Gene Vincent
Gene Vincent

Reputation: 5469

Floating HTML list items with different height

I want to float my list items into a grid like structure depending on the available width.

Unfortunately my items are of different hight and sometimes the items don't wrap all the way to the left. In the example I made the first item a little higher to show the problem, in reality I have no idea which item will be which height.

How can I make the 2nd row start a little further down, but always on the left side ?

<html>
<head>
<style>
li {display: block; width:200px; height:100px; float:left; border:1px solid;}
</style>
</head>
<body>
<ul>
<li style="height:110px;"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>

Upvotes: 6

Views: 16259

Answers (2)

UID
UID

Reputation: 4514

To make inline use "display:inline:block property" this should resolve both your issue:- 1) coming in line 2) It gives spacing too between elements

But if you think all objects might have different height, I would recommend use "vertical-align:top" and along with that "margin-bottom:5px" to give space, as vertical-align:topremoves the space too between rows.

here is the code:-

HTML:

    <ul>
<li style="height:110px;"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

CSS:

li {
   display: inline-block; 
   width:200px; 
   height:100px; 
   border:1px solid; 
   vertical-align:top; 
   margin-bottom:5px;
}

You can refer to the Fiddle here:- http://jsfiddle.net/aasthatuteja/2Uygc/

Please let me know if this resolves you issue.

Enjoy!

Upvotes: 2

Itay
Itay

Reputation: 16777

Use display: inline-block instead of float: left/right

jsFiddle Demo

Further reading: What’s the Deal With Display: Inline-Block?

Upvotes: 13

Related Questions