CODEWITHSUNDEEP
htmlcss
Pacuraru Daniel
Pacuraru Daniel

Reputation: 1205

html list on 3 columns with different heights

I am trying to create a 3 column layout for a blog and it's responsive and adapts on 2 column under a certain resolution. My problem is i add the blocks on a list with float: left; but some of the blocks have bigger height than others and the layout buggs out.

<ul>
    <li>
        <h2><a href="#">Title</a></h2>
        <p>Message</p>
    </li>
    <li>
        <h2><a href="#">Title</a></h2>
        <p>Message</p>
    </li>
    <li>
        <h2><a href="#">Title</a></h2>
        <p>Message</p>
    </li>
    <li>
        <h2><a href="#">Title</a></h2>
        <p>Message</p>
    </li>
</ul>

This is my list for example but if the 3rd list item is less in height, the 4th item goes under 3rd item not under all 3 items. Is there a way to force all items on a line to start from same position? Thank you, Daniel!

The css

ul {
    width: 104%;
    overflow: hidden;
}
li {
    width: 30.4%;
    float: left;
    margin-right: 2.5%;
    margin-bottom: 60px;
}

Upvotes: 0

Views: 199

Answers (3)

Pacuraru Daniel
Pacuraru Daniel

Reputation: 1205

After searching some similar stuff on stackoverflow i found a cool solution that a guy gave on a post. Practically you remove the 

float: left;

and add instead

display: inline-table;
vertical-align: top;

it's awesome because it works even in IE8.

Thank you all for replying here aswell.

Upvotes: 2

Falguni Panchal
Falguni Panchal

Reputation: 8981

LIke this

demo

css

*{
    margin:0;
    padding:0;
}
.blog-articles ul {
    width: 100%;
    overflow: hidden;
    margin:0;
    padding:0;

    list-style-type:none;
}
.blog-articles li {
    width:24%;
      float:left;
    margin-right:1%;
    margin-bottom: 60px;
    background-color:yellow;
    list-style-type:none;
}
.blog-articles h2{
    margin:0;
    padding:0;

}

Upvotes: 0

pawel
pawel

Reputation: 36965

Add clear:left to every third element of your list:

.blog-articles li:nth-child(3n+1) {
    clear:left;   
}

and in similar fashion (2n+1) to every second element under certain resolution.

example: http://jsfiddle.net/kZqnL/

Upvotes: 0

Related Questions