PayneLess Designs - Images - Side By Side and With Links

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Images - Side By Side and With Links</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<style type="text/css">
* { margin: 0; padding: 0; border: 0; }

#wrapper {
width: 960px;
margin: 0 auto;
}

h1, h3, p {
margin: 3% 0;
text-align: center;
}
</style>
</head><body>
<div id="wrapper">

<h1>Images - Side By Side and With Links</h1>
<p>Note: Do NOT <a href="http://en.wikipedia.org/wiki/Inline_linking" title="Hotlinking Information">hotlink</a> to images!</p>

<h3>Side by Side Images:</h3>
<div style="width: 480px; height: 360px; margin: 0 auto;"><a href="#nogo" title="Mouseover Description"><img src="http://i.imgur.com/Ii3Oy.jpg" style="width: 240px; height: 180px;" alt=""></a><a href="#nogo" title="Mouseover Description"><img src="http://i.imgur.com/Ii3Oy.jpg" style="width: 240px; height: 180px;" alt=""></></div>

<h3>Side by Side and Spaced 50 Pixels</h3>
<div style="width: 530px; height: 360px; margin: 0 auto;"><a href="#nogo" title="Mouseover Description"><img src="http://i.imgur.com/Ii3Oy.jpg" style="width: 240px; height: 180px;" alt=""></a><a href="#nogo" title="Mouseover Description"><img src="http://i.imgur.com/Ii3Oy.jpg" style="margin-left: 50px; width: 240px; height: 180px;" alt=""></a></div>

<h3>Side by Side Images with Comments</h3>
<div style="width: 720px; height: 360px; margin: 0 auto; font-family: arial, 'times new roman', sans-serif; font-size: 1.25em; color: #080;"><a href="#nogo" title="Mouseover Description"><img src="http://i.imgur.com/Ii3Oy.jpg" style="width: 240px; height: 180px;" alt=""></a><a href="#nogo" title="Mouseover Description"><img src="http://i.imgur.com/Ii3Oy.jpg" style="width: 240px; height: 180px;" alt=""></a><a href="#nogo" title="Mouseover Description"><img src="http://i.imgur.com/Ii3Oy.jpg" style="width: 240px; height: 180px;" alt=""></a><p style="float: left; margin-left: 60px;">Comment 1</p><p style="float: left; margin-left: 120px;">Comment 2<p style="float: left; margin-left: 180px;">Comment 3</p></div>

<h3>Image with Right-Side Links:</h3>
<div style="width: 350px; height: 180px; margin: 0 auto; border: 1px solid #f0f;"><img src="http://i.imgur.com/Ii3Oy.jpg" style="width: 240px; height: 180px; float: left; clear: right;" alt=""><p><a href="#nogo" title="Mouseover Description">Link 1</a><br><a href="#nogo" title="Mouseover Description">Link 2</a></p></div>

</div>
</body></html>