Search code examples
cssimagecss-tables

CSS - Image alignment

Can I do this without using tables, or is tables the best solution?

Each numbered box is a different piece of image:

   ___________________
   |       |    2    |
   |       |_________|
   |   1   |  3 |  4 |
   |       |____|____|
   |       |    5    |
   |_______|_________|
Solution

  • You could do this using floats as long as your container has a defined width. So an example might look like this:

    <div class="container">
  <img src="img1.jpg" />
  <img src="img2.jpg" />
  <img src="img3.jpg" />
  <img src="img4.jpg" />
  <img src="img5.jpg" />
</div>
<div class="clear"></div>

    And your css would be:

    .container {
  width: 600px;
}

img {
  float: left;
}

.clear {
  clear: both;
}

    As long as your images are built at the proper widths and heights, then that should do the trick.