Login/Register
Floating HTML list items with different height
Asked Answered
Solved htmlcsscss-floathtml-lists
A

2

6

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>
Algoid answered 13/9, 2013 at 14:47 Comment(1)
please create a Jsfiddle for the same so that we may be able to look into your problem jsfiddle.net – Bravery
U
13

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

jsFiddle Demo

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

Uniaxial answered 13/9, 2013 at 14:49 Comment(0)
K
2

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!

Kop answered 13/9, 2013 at 15:2 Comment(1)
Awesome, thanks, just what I was looking for. Because I wanted everything to be align to the top. Which it dose with Float and not Inline-block. – Phytobiology

© 2022 - 2024 — McMap. All rights reserved.