Image Placement & Styles

I provide two floating boxes for image placement. Each box is given a class for the box type, plain (img) or bordered (imgbox), plus a class for the float placement, left, right, or center.

Note, if you want a caption, you must provide the width of the image in your XHTML. This is clearly a flaw, but there is no way to do this automatically without the use of Javascript or PHP code.

Plain Image and Caption Box

A borderless box and image with an optional, accompanying caption. If you don't want a caption, do not include the second paragraph tag.

Right float


<div class="img right" style="width: 200px;">
    <p><img src="http://www.haydenplanetarium.org/images/universe/mwM54.gif" width="200" height="200" alt="Looking back on the Milky Way from the globular cluster M54" /></p>
    <p>Looking back on the Milky Way from M54, a globular cluster that's 85,000 light-years from Earth.</p>
</div>

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

Looking back on the Milky Way from the globular cluster M54

Looking back on the Milky Way from M54, a globular cluster that's 85,000 light-years from Earth.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Left float


<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

<div class="img left" style="width: 140px;">
    <p><a href="/universe/distribution/uniview/pics/#mountains"><img src="http://www.haydenplanetarium.org/images/universe/Surface2.jpg" width="140" height="105" alt="Mountains on Earth" /></a></p>
    <p>Mountains on Earth.</p>
</div>

<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

Mountains on Earth.

Center float


<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

<div class="img center" style="width: 300px;">
    <p><a href="/universe/uniview/pics/#hindukush"><img src="http://www.haydenplanetarium.org/images/universe/Hindu-Kush-Uniview.jpg" width="300" height="225" alt="Uniview screen shot of the International Space Station over the Hindu Kush"  /></a></p>
    <p>Uniview screen shot of the International Space Station over the Hindu Kush.</p>
</div>

<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

Uniview screen shot of the International Space Station over the Hindu Kush.

Center float, bordered image

Note the use of the border class on the image.


<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

<div class="img center" style="width: 302px;">
    <p><a href="/universe/uniview/pics/#hindukush"><img src="http://www.haydenplanetarium.org/images/universe/Hindu-Kush-Uniview.jpg" width="300" height="225" alt="Uniview screen shot of the International Space Station over the Hindu Kush" class="border" /></a></p>
    <p>Uniview screen shot of the International Space Station over the Hindu Kush.</p>
</div>

<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

Uniview screen shot of the International Space Station over the Hindu Kush.

Center float, image border, large caption

Use the largeimage class whe you want the spacing and caption to be a little larger.


<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

<div class="img center largeimage" style="width: 502px;">
    <p><img src="http://www.haydenplanetarium.org/images/universe/Cassini5-500px.jpg" width="500" height="375" alt="Cassini spacecraft orbiting Saturn" class="border" /></p>
    <p>Cassini spacecraft orbiting Saturn.</p>
</div>

<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

Cassini spacecraft orbiting Saturn

Cassini spacecraft orbiting Saturn.

Bordered Image and Caption Box

Floats a bordered box which surrounds a bordered image with an optional acompanying caption. The specified width must be 2 pixels larger than the image width to accommodate the box border.

Right float


<div class="imgbox right" style="width: 152px;">
    <p><a href="http://antwrp.gsfc.nasa.gov/apod/ap050911.html"><img src="http://www.haydenplanetarium.org/images/resources/jupiterbrain_cassini_big-sm.jpg" width="150" height="134" alt="Jupiter taken from the Cassini Spacecraft. APOD: 11 Sept 2005" /></a></p>
    <p>Jupiter taken from the Cassini spacecraft. <a href="http://antwrp.gsfc.nasa.gov/apod/">Astronomy picture of the day</a>, 11 September 2005. (<a href="http://ciclops.org/">Cassini Imaging Team</a>, <a href="http://saturn.jpl.nasa.gov/home/index.cfm">Cassini Project</a>, <acronym title="National Aeronautics and Space Administration"><a href="http://www.nasa.gov/">NASA</a></acronym>)</p>
</div>

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

Jupiter taken from the Cassini spacecraft. Astronomy picture of the day, 11 September 2005. (Cassini Imaging Team, Cassini Project, NASA)

Left float


<div class="imgbox left" style="width: 502px;">
    <p><img src="http://www.haydenplanetarium.org/images/universe/Surface2-500px.jpg" width="500" height="375" alt="Mountains on Earth" /></p>
    <p>Mountains on Earth.</p>
</div>

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

Mountains on Earth

Mountains on Earth.

Center float, large caption


<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

<div class="imgbox center largeimage" style="width: 502px;">
    <p><img src="http://www.haydenplanetarium.org/images/universe/Cassini5-500px.jpg" width="500" height="375" alt="Cassini spacecraft orbiting Saturn" class="border" /></p>
    <p>Cassini spacecraft orbiting Saturn.</p>
</div>

<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

Cassini spacecraft orbiting Saturn

Cassini spacecraft orbiting Saturn.

Image Lists

Both the img and the imgbox classes accommodate a list of images. Note, the style uses the li:first-child to get the proper spacing between the images. This may not work in older browsers, resulting in a space between the top image and its containing box border.

Bordered, right floated list of images


<div class="imgbox right" style="width: 152px;">
    <ul>
        <li>
            <p><a href="http://www.haydenplanetarium.org/programs/asimov/archive/2003/pics/#panel"><img id="first" src="/images/programs/asimov/20030422asimov1-small.jpg" width="150" height="112" alt="2003 Asimov Panel Debate" /></a></p>
            <p>The 2003 Isaac Asimov Memorial Debate panel.</p>
        </li>
        <li>
            <p><a href="http://www.haydenplanetarium.org/programs/asimov/archive/2003/pics/#group"><img src="http://www.haydenplanetarium.org/images/programs/asimov/20030422asimov2-small.jpg" width="150" height="104" alt="Group shot of the 2003 panelists" /></a></p>
            <p>Group shot of the 2003 panelists.</p>
        </li>
    </ul>
</div>
        
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

The 2003 Isaac Asimov Memorial Debate panel.
Group shot of the 2003 panelists.

Horizontal list of images


<div class="imagerow">
    <p><img src="http://www.haydenplanetarium.org/images/universe/02stars-100px.jpg" width="100" height="100" alt="The Solar neighborhood" title="Looking back toward the Sun from Aldebaran in Taurus, about 70 light-years away." /></p>
    <p><img src="http://www.haydenplanetarium.org/images/universe/03ob-100px.jpg" width="100" height="100" alt="The Galactic neighborhood" title="About 5000 light-years from the Sun and Earth, we see pulsars (red), open star clusters (green), and OB associations (orange)." /></p>
    <p><img src="http://www.haydenplanetarium.org/images/universe/mw_headshot.jpg" width="100" height="100" alt="Milky Way" title="Outside the Milky Way. The cross is where we are." /></p>
    <p><img src="http://www.haydenplanetarium.org/images/universe/exgal_headshot.jpg" width="100" height="100" alt="Two-degree Field galaxies" title="Large-scale structure in the 2dF galaxies. Each yellow point is a galaxy!" /></p>
</div>

The Solar neighborhood