CODEWITHSUNDEEP
htmlcsshtml-lists
Talha
Talha

Reputation: 350

How to float elements in rows.

Here is my last chance for this 'probably' a CSS problem.

This is the problem page. http://mentor.com.tr/?page_id=81

The site is built on wordpress. And generated posts are displayed as unordered lists.

    <ul class="lcp_catlist">
    <li>
    <li>
    <li>
    ...
    </ul>

All the <li>'s are floated to the left. But as you will see there's one strange gap on the left row. That is my problem. How can I fix that? I'm going crazy with this.

Gap:

enter image description here

Upvotes: 1

Views: 1935

Answers (3)

Andrey Kamaev
Andrey Kamaev

Reputation: 30152

Gap occurs because height of image http://mentor.com.tr/wp-content/themes/hybrid/library/images/2011/07/Aycan.jpg is 1 pixel smaller then others. Modify your image style from extrastyles.css as following to remove the gap:

ul.lcp_catlist img {
    float: left;
    height: 206px;
    margin-right: 5px;
    margin-top: -2px;
    width: auto;
}

Upvotes: 1

Joshua
Joshua

Reputation: 3603

Try removing float: left and using display: inline-block instead.

Note: Inline-block is not supported in IE6/7, but it will work the same if you apply "display:inline;zoom:1" in an IE6/7 only stylesheet.

Upvotes: 2

Joseph Marikle
Joseph Marikle

Reputation: 78580

You can specify an explicit height for the li elements

ul.lcp_catlist li {
    ...
    height: 240px;
}

Upvotes: 3

Related Questions