CODEWITHSUNDEEP
htmlcssalignmentvertical-alignment
Mihad Aiko
Mihad Aiko

Reputation: 947

How Do I Align Divs With Different Heights?

I'm having trouble aligning my divs. My divs have no set height so they take the height of how much text is inside.

Here is a photo of what it looks like now.

enter image description here

Notice the prince post is aligned right and under that post is another post aligned under it. I can't seem to figure out what's going wrong in this.

Here is my html:

<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>

Here is the css:

.large-columnz {  
    max-width:560px;
    margin-bottom:10px;
    display: inline-block;
    vertical-align: top;
    *display: inline;
 }

I am using the Foundation responsive framework to design my site as well as my own incorporated css.

Can anyone tell me what I am doing wrong which causes the last two post to not align.

Upvotes: 0

Views: 2728

Answers (1)

Dhaval Chheda
Dhaval Chheda

Reputation: 5167

in the parent div that wraps all the divs ( if you don't have a wrapping div then add 1 ) and then add display: flex; in the parent div style and all the child containers will have the same height..

Upvotes: 1

Related Questions