CODEWITHSUNDEEP
htmlcss
Arkaitz Jimenez
Arkaitz Jimenez

Reputation: 23198

Aligning display-block divs into the same row

I have a chunk of HTML to display images and other stuff together in the same box with inline-block:

<body>
  <div class="attachment-list">
    <div class="galleryslot">
      <a class="">
      <img src="http://www.google.ie/logos/classicplus.png" width="100">
      </a>
      </div>
      <div class="galleryslot">
         <a class="" >
         <img src="http://www.google.ie/images/nav_logo99.png" width="75">
         </a>
      </div>
</div>

This was my attempt, but it is clearly missaligned, the galleryslot div will contain more than the link and the image, but should work like this.

http://jsbin.com/afiqeg/3

Any idea what am I missing? I see it very out of line with firefox, the wider image is aligned with the bottom part of the taller one, I'd like them to align on the top.

Upvotes: 0

Views: 307

Answers (1)

Blender
Blender

Reputation: 298392

Just float: left your existing <div>s and give the parent overflow: auto: http://jsbin.com/edacib/edit#javascript,html,live

Upvotes: 2

Related Questions