Home/ Questions/Q 8462381
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T14:09:04+00:00

I have a set of images aligned using the below CSS but they are

  • 0

I have a set of images aligned using the below CSS but they are being placed top to bottom. How do I align them left to right?

In other words:

1|2|3|4

5|6|7|8

vs

1|3|5|7

2|4|6|8

#photos {
   line-height: 0;
   -webkit-column-count: 5;
   -webkit-column-gap:   0px;
   -moz-column-count:    5;
   -moz-column-gap:      0px;
   column-count:         5;
   column-gap:           0px;
}
#photos img {
  width: 100% !important;
  height: auto !important;
}

This is from the turtorial: http://css-tricks.com/seamless-responsive-photo-grid/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It depends on what you are trying to accomplish. If you are really stuck on using HTML5 you should consider the fact that this won’t work in all browsers, or all browser versions. If you are simply trying to make a block of images with no seams and have them stack in a row see the following.

      <style type="text/css">
        #photos {
            float:left;
            width:800px;
        }
        .imageItem{
            float:left;
        }
    </style>
</head>
<body>
        <div id="photos">
        <img class="imageItem" src="http://farm8.staticflickr.com/7136/7733019900_c671c8d393_m.jpg" />
        <img class="imageItem" src="http://farm8.staticflickr.com/7136/7733019900_c671c8d393_m.jpg" />
        <img class="imageItem" src="http://farm8.staticflickr.com/7136/7733019900_c671c8d393_m.jpg" />
        <img class="imageItem" src="http://farm8.staticflickr.com/7136/7733019900_c671c8d393_m.jpg" />
        <img class="imageItem" src="http://farm8.staticflickr.com/7136/7733019900_c671c8d393_m.jpg" />
        <img class="imageItem" src="http://farm9.staticflickr.com/8426/7733031344_0762136432_m.jpg"/>
        <img class="imageItem" src="http://farm9.staticflickr.com/8426/7733031344_0762136432_m.jpg"/>
        <img class="imageItem" src="http://farm9.staticflickr.com/8426/7733031344_0762136432_m.jpg"/>
        <img class="imageItem" src="http://farm9.staticflickr.com/8426/7733031344_0762136432_m.jpg"/>
        <img class="imageItem" src="http://farm9.staticflickr.com/8426/7733031344_0762136432_m.jpg"/>
    </div>
</body>
    • 0