Help - Search - Members - Calendar
Full Version: Pictures Side By Side in Post
Movable Type Community Forum > Additional Resources > Tips and Tricks
andyhitomi
When I post pictures (thumbnails actually) in my blog, using the main MT interface, they sometimes appear side by side (in Explorer) and sometimes stacked vertically (Mozilla and Safari). I am posting them by pasting HTML into the MT interface. What HTML (or CSS changes) should I use to make the pictures always line up side by side?

See http://www.japanwindow.com for examples.

Thanks.
kadyellebee
Is the example blog yours? If so, there are some odd things in your HTML and CSS. Image tags don't have ending tags like </img>, and instead, they just need a / at the end of the tag like this:
CODE
<img src="http://www.japanwindow.com/gallery/mti/040210.jpg" />

And I don't know what xthumbnail-orig-image is, its not a standard html attribute that I know of.

To make images line up next to each other, here's what I do. Put this in your entry:
CODE
<div class="photos"><img src="http://my-site.com/image_one.gif" alt="image_one" /><img src="http://my-site.com/image_two.gif" alt="image_two" /></div>
<br clear="all" />

and this in your css:
CODE
.photos img { float:left;}

The br after the images ensures that they don't make the text below them float around them.

Hope that helps,
Kristine
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2009 Invision Power Services, Inc.