Masonry blog layout issues in different browsers

Question

I am a novice at web design and would really appreciate anyone's help!

I want my blog archive pages to have kind of a masonry layout. But I want the posts to all be the same size so that it creates a perfect grid. The layout is showing up correctly is Safari, but in Chrome and Firefox the columns are getting messed up. The title will be in one column and the featured image carries over into the next column.

I tried adding {max-width:75%; height:900px;} and that fixed the issue in Chrome, but not in Firefox and totally messed up the layout in Safari (the columns overlapped over the sidebar).

Here is the blog archive page: http://thehousecandy.com/category/all-things-decor/

Here is the css that I currently used:

.archive #content {
column-count: 3;
column-gap: 1em;
column-rule: 0 solid #666;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
-moz-column-count: 3;
-moz-column-gap: 1em;
-moz-column-rule: 0 solid #666;
-o-column-count: 3;
-o-column-gap: 1em;
-o-column-rule: 1px solid #666;

}

.archive .blog-post-wrapper {
border: solid 1px #b3b3b3;
display: block;
margin: 5px 0 25px;
padding: 5px;

}

.archive .image-wrap {
width: 220px;
height: 170px;

}

.archive .thumbnail img {
padding: 0;
height: 100%;
width: 100%;

}

.archive #content p {
display: none;

}

.archive #content .blog-big {
margin-bottom: 0 0 10px 0;

}

.archive .blog-big {
margin: 0;
padding: 0;

}

.archive h2.post-title {
background-color: #ffffff;
max-width: 100%;
display: block;
text-align: center;
padding-top: 8px;
padding-bottom: 5px;
margin: 0;
color: #fff;
text-decoration: bold;
font-family: 'questrial' !important;
height: 45px;
font-weight: bold;
line-height: 8px;

}

.archive #content h2.post-title a {
font-size: 16px;
text-decoration: bold;

}

.archive #content .socials {
display: none;

}

.archive #content .blog-signature img {
display: none;

}

score 0 · Answer 1 · answered May 21 '14 at 19:28

You have to float all .blog-post-wrapper elements to the left and add a specific height to them. I did this using Chrome and all elements were perfectly align.

Try this:

.archive .blog-post-wrapper {
border: solid 1px #b3b3b3;
display: block;
float: left;
height: 262px;
margin: 5px 0 25px;
padding: 5px; 
}

Masonry blog layout issues in different browsers

1 Answers1