CODEWITHSUNDEEP
csshtmlbanner
Andrus
Andrus

Reputation: 27931

Vertically aligning inline-block elements with different heights

I have an HTML page which contains inline-block divs with variable heights (marked with .banner classes):

<html>
<head>
<body>
<div id="container">
 <div id="header" style="margin: 0; width: 100%">
 <div>
   <div class='banner'> ...  </div>
   <div class='banner'> ...  </div>
   <div class='banner'> ...  </div>
  </div>

.banner {
    display: inline-block;
}

They have different widths and are added at runtime. The site layout looks ugly and the banners are not vertically aligned.

For unknown reasons, the div does not start not from the top left corner, but there is some empty space at top. How do you align it and the next banner vertically (e.g. make their bottom lines aligned)?

I'm using jQuery, jQueryUI, and ASP.NET MVC2.

Upvotes: 6

Views: 4131

Answers (1)

jeyraof
jeyraof

Reputation: 893

.banner {
display: inline-block;
vertical-align:middle;
}

Upvotes: 10

Related Questions