Nutrition as Medicine


Lining images up side-by-side

Click through to see the code I used for the tofu towel images. Basically, you surround each image in a div with a width of 25% (this may change depending on how many images you have). Make sure that div is also floating to the left. Then, make the images 100% of that width, and be sure to add a clear div at the end so it's not breaking the rest of your page.

<div style="float:left; width:25%;">
<img src="https://d3n8a8pro7vhmx.cloudfront.net/nutritionasmedicine/pages/239/attachments/original/1352261149/Tofu_towel_part1.jpg?1352261149" alt="" width="100%" />
</div>
<div style="float:left; width:25%;">
<img src="https://d3n8a8pro7vhmx.cloudfront.net/nutritionasmedicine/pages/239/attachments/original/1352261157/Tofu_towel_part2.jpg?1352261157" alt="" width="100%" />
</div>
<div style="float:left; width:25%;">
<img src="https://d3n8a8pro7vhmx.cloudfront.net/nutritionasmedicine/pages/239/attachments/original/1352261162/Tofu_towel_part3.jpg?1352261162" alt="" width="100%" />
</div>
<div style="float:left; width:25%;">
<img src="https://d3n8a8pro7vhmx.cloudfront.net/nutritionasmedicine/pages/239/attachments/original/1352261166/Tofu_towel_part4.jpg?1352261166" alt="" width="100%" />
</div><div style="clear:both;"></div>
Do you like this post?

Be the first to comment