CSS Not Laying Out Properly

HTML & CSS
1

I’ve tried everything to make the CSS work, and am stuck. Probably a typical request for y’all, but after reading a couple tutorials, I’m still lost.

I’m using a background image, and trying to align three photos in it. The first box is correct, but the other two are all over the page. What am I doing wrong, and is there any CSS shorthand I can use to cut down the repetitions?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
	
<style media="all">

#photos {
width: 610px;
height: 185px;
background-image:url(imgs-photos/film-bg.png);
background-repeat:no-repeat;
margin-bottom: 30px;
}

.photo-left {
float: left;
width: 198px;
margin-top: 35px;
margin-left: 11px;
}

.text-left {
float: left;
width: 198px;
margin-top: 45px;
margin-right: 412px;
font-size: .7em;
line-height: 1.0em;
font-weight: bold;
color: #FAE2C0;
text-align: center;
}

.photo-mid {
float: left;
width: 198px;
margin-top: 35px;
margin-left: 209px;
}

.text-mid {
float: left;
width: 198px;
margin-top: 45px;
margin-right: 412px;
font-size: .7em;
line-height: 1.0em;
font-weight: bold;
color: #FAE2C0;
text-align: center;
}

.photo-right {
float: left;
width: 198px;
margin-top: 35px;
margin-left: 407px;
}

.text-right {
float: left;
width: 198px;
margin-top: 45px;
margin-right: 407px;
font-size: .7em;
line-height: 1.0em;
font-weight: bold;
color: #FAE2C0;
text-align: center;
}

</style>
	
</head>
<body>

<div id="photos">

<div class="photo-left"><img src="imgs-photos/test-photo.gif" width="175" height="107" border="0"></div>
<div class="text-left">Abacoa Car Show<br />Abacoa Town Center<br />June 1, 2013</div>

<div class="photo-mid"><img src="imgs-photos/test-photo.gif" width="175" height="107" border="0"></div>
<div class="text-mid">Abacoa Car Show<br />Abacoa Town Center<br />June 1, 2013</div>

<div class="photo-right"><img src="imgs-photos/test-photo.gif" width="175" height="107" border="0"></div>
<div class="text-right">Abacoa Car Show<br />Abacoa Town Center<br />June 1, 2013</div>

</div>

</body>
</html>

Can you help an old guy out…again? And as always, thanks for everything y’all do to help us dummies!

2

Just to clarify, do you want the text under each image?

3

Sorry, YES. The text should be centered under each of the three images. I’m still playing with it on my end, but haven’t gotten any further than when I first posted the question.

4

It’s a lot neater to do something like this: http://codepen.io/pageaffairs/pen/ruvsp

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
	
<style media="all">

#photos {
width: 610px;
background-image:url(imgs-photos/film-bg.png);
background-repeat:no-repeat;
margin-bottom: 30px;
background: #f7f7f7;
overflow: hidden;
}

.photo {
float: left;
width: 188px;
margin-top: 35px;
margin-left: 10px;
color: #FAE2C0;
text-align: center;
}

</style>
	
</head>
<body>

<div id="photos">

	<div class="photo">
		<div><img src="imgs-photos/test-photo.gif" width="175" height="107" border="0"></div>
		<p>Abacoa Car Show<br />Abacoa Town Center<br />June 1, 2013</p>
	</div>
	
	<div class="photo">
		<div><img src="imgs-photos/test-photo.gif" width="175" height="107" border="0"></div>
		<p>Abacoa Car Show<br />Abacoa Town Center<br />June 1, 2013</p>
	</div>
	
	<div class="photo">
		<div><img src="imgs-photos/test-photo.gif" width="175" height="107" border="0"></div>
	<p>Abacoa Car Show<br />Abacoa Town Center<br />June 1, 2013</p>
	<div>
	
</div>

</body>
</html>
5

Thanks, Ralph. I found the problem…it was in the image. There were three photo frames, but they were not of equal size in width. So I cut it to one frame, and made it repeat.

Your CSS and HTML layout worked perfectly, and thanks again.