My layout consists of a grid with 8 boxes containing images. Each row has 4 columns, and there are 2 rows in total. The boxes are set to float: left and display: inline. Everything aligns perfectly when the height is fixed.
Here is an example:
Example ImageHowever, when I add height:auto, the second row stacks at the third column.
Here is how it looks:
Stacked Rows ExampleI want all rows and columns to align properly without skewing or stretching the images. I am open to any solution (jQuery or other) as long as the desired result is achieved.
I have tried various solutions such as clear both, vertical-align: top, clearfix after, display: table-cell instead of display: inline, etc. I have exhausted all online resources for solutions.
Below is the CSS code snippet:
.post{
float:left;
display:inline-block;
list-style: none;
width: 200px;
height: auto;
overflow:hidden;
margin-right: 12px;
margin-bottom: 12px;
padding: 10px;
background-color: white !important;
}
.post-body {
width: 100% !important;
height: auto;
overflow: hidden;
padding: 0px !important;
margin: 0px !important;
}
.post img {
width: 100% !important;
height:auto;
padding: 0px;
margin: 0px;
}
This layout is on the Blogger.com platform, making it hard to share the entire HTML. However, here are the main sections:
<b:section class='main' id='main' maxwidgets='3' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='main' var='top'>
<b:includable id='post' var='post'>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>
<data:post.body/>
<div style='clear: both;'/>
</div>
</div>
</b:includable>
</b:includable>
</b:widget>
</<b:section>