CODEWITHSUNDEEP
htmlcss
Montao
Montao

Reputation: 255

aligning my images with CSS

When I look at my webpage, the images are not aligned. I would like the icons to be straightly aligned but there is a difference that look like it depends on the other cell, depending on how large is the container for writing the time: enter image description here

I created a fiddle for the problem. Can you help me? The incorrect code seems to be the CSS:

#list_item_thumbs .item {
    list-style: none;
    margin: 0;
    display: block;
    clear: both;
    overflow: visible;
    border-bottom: 1px solid #ccc;
    position: relative;
    padding: 8px 0 0 0;
    height: 88px;
}

Upvotes: 0

Views: 36

Answers (2)

markt
markt

Reputation: 903

There are 2 solutions to this:

One is use a table, then the columns will automatically align.

The other is use fixed widths on your columns, give them classes .datetime, .image and .description

and apply a width to each.

.datetime {
    display: block;
    width: 25%;
}

.image {
    display: block;
    width: 25%;
}

.description {
    display: block;
    width: 50%;
}

Upvotes: 2

Andy Hoffman
Andy Hoffman

Reputation: 19111

Add this to your images:

#list_item_thumbs .item_img img {
  display: block;
  margin: 0 auto;
}

I would also add this to the .item_age class to further help with alignment:

#list_item_thumbs .item_age {
  min-width: 4em;  
}

enter image description here

https://jsfiddle.net/8172md5g/1/

Upvotes: 1

Related Questions