CSS/HTML problem [Archive]

alphaniner

July 1st, 2010, 02:47 PM

I'm trying to create a simple image gallery for personal use. I used tutorials and templates to get where I've gotten, but I've run into a problem I can't work out.

Here's a simplified version of my page to illustrate my problem.
Apologies for the poor formatting, all of the <div> entries are generated by a script.

<html>

<head>
<title> Title </title>
<style type="text/css">
div.img
{
margin:9px;
border:1px solid #0000ff;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
}
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:center;
font-weight:normal;
width:200px;
margin:2px;
}
.text_line
{
clear:both;
margin-bottom:2px;
}
</style>
</head>

<body bgcolor="black" text="white" link="yellow" vlink="orange">
<h1 class="text_line"> Heading1 <font size="4"></font></h1>

<div class="img"><a href="./1.jpg"><img src="./1.jpg" width="200" height="300" /></a><div class="desc"><a href="./file">One line title</a></div></div>
<div class="img"><a href="./1.jpg"><img src="./1.jpg" width="200" height="300" /></a><div class="desc"><a href="./file">One line title</a></div></div>
<div class="img"><a href="./1.jpg"><img src="./1.jpg" width="200" height="300" /></a><div class="desc"><a href="./file">Multi-line<br>title</a></div></div>
<div class="img"><a href="./1.jpg"><img src="./1.jpg" width="200" height="300" /></a><div class="desc"><a href="./file">One line title</a></div></div>
<div class="img"><a href="./1.jpg"><img src="./1.jpg" width="200" height="300" /></a><div class="desc"><a href="./file">One line title</a></div></div>
<div class="img"><a href="./1.jpg"><img src="./1.jpg" width="200" height="300" /></a><div class="desc"><a href="./file">One line title</a></div></div>
<div class="img"><a href="./1.jpg"><img src="./1.jpg" width="200" height="300" /></a><div class="desc"><a href="./file">One line title</a></div></div>
<div class="img"><a href="./1.jpg"><img src="./1.jpg" width="200" height="300" /></a><div class="desc"><a href="./file">Multi-line<br>title</a></div></div>


<h1 class="text_line"> Heading2 <font size="4"></font></h1>
<div class="img"><a href="./1.jpg"><img src="./1.jpg" width="200" height="300" /></a><div class="desc"><a href="./file">One line title</a></div></div>
<div class="img"><a href="./1.jpg"><img src="./1.jpg" width="200" height="300" /></a><div class="desc"><a href="./file">One line title</a></div></div>
<div class="img"><a href="./1.jpg"><img src="./1.jpg" width="200" height="300" /></a><div class="desc"><a href="./file">Multi-line<br>title</a></div></div>
<div class="img"><a href="./1.jpg"><img src="./1.jpg" width="200" height="300" /></a><div class="desc"><a href="./file">One line title</a></div></div>
<div class="img"><a href="./1.jpg"><img src="./1.jpg" width="200" height="300" /></a><div class="desc"><a href="./file">One line title</a></div></div>
<div class="img"><a href="./1.jpg"><img src="./1.jpg" width="200" height="300" /></a><div class="desc"><a href="./file">Multi-line<br>title</a></div></div>
<div class="img"><a href="./1.jpg"><img src="./1.jpg" width="200" height="300" /></a><div class="desc"><a href="./file">One line title</a></div></div>
<div class="img"><a href="./1.jpg"><img src="./1.jpg" width="200" height="300" /></a><div class="desc"><a href="./file">Multi-line<br>title</a></div></div>


</body>

</html>

Basically, the image titles vary, and this can cause wrapping errors:

Good:
http://i969.photobucket.com/albums/ae180/tomatocatsup/2b.png

Bad:
http://i969.photobucket.com/albums/ae180/tomatocatsup/1b.png

I know I can force all of the boxes to be the same size, but I was hoping for a slightly more elegant solution. Thanks.