I'm struggling with aligning my divs properly. The issue I am facing is that my divs adjust their height based on the content within them, which is causing alignment problems.
Below is a picture illustrating the current situation:
https://i.sstatic.net/Igmfk.png
You'll notice that the "prince" post is correctly aligned to the right, but the subsequent post appears below it instead of lining up next to it. I can't seem to identify what's causing this misalignment.
Here is the section of my HTML code in question:
<div class="row" style="padding:30px 10px 30px 20px; margin:auto; display:block;">
<div class="large-12 column large-columnz">
<a href="post url"><img src=""></a>
<div class="row column">The Title
Article Excerpt</div>
</div>
</div>
</div>
And here is the relevant CSS code:
.large-columnz {
max-width:560px;
margin-bottom:10px;
display: inline-block;
vertical-align: top;
*display: inline;
}
I am utilizing the Foundation responsive framework for my website design, along with custom CSS.
If anyone can offer insight into why the last two posts are not aligning properly, I would greatly appreciate it.