Positioning text beside images

HTML & CSS
1

Good evening,

I would like to position a list of links in the format below. The links are coded in a <ul> list and I want to put an image to the left of each one.

I can do this with the float:left class. The problem is that when I have text that spans multiple lines, it ends up wrapping with the image - so part of the text appears just below the image which I don’t want.

Normally I would use a table, but I want both the image and the text beside the image to be one link that goes to the same destination.

Any thoughts on accomplishing this?

2

Maybe list-style-image http://reference.sitepoint.com/css/list-style-image
Though I have a feeling background-image and padding might be better http://reference.sitepoint.com/css/background-image

3

Hi,

One way of doing it is like this:


<!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>Untitled Document</title>
<style type="text/css">
ul.thumbs {
	margin:0 auto;
	padding:0;
	list-style:none;
	width:500px;
}
ul.thumbs li { margin:0 0 20px; }
ul.thumbs li a, ul.thumbs li a:visited {
	display:block;
	text-decoration:none;
	color:#000;
}
ul.thumbs li img, ul.thumbs li span {
	display:inline-block;
	vertical-align:middle;
}
ul.thumbs li img { border:2px solid #000; }
ul.thumbs li span {
	width:280px;
	margin:0 0 0 8px
}
ul.thumbs li a:hover { color:#f00 }
ul.thumbs li a:hover img { border-color:#f00 }
</style>
</head>

<body>
<ul class="thumbs">
		<li><a href="#"> <img src="http://placehold.it/200x150" width="200" height="150" alt="example" ><span> This is the caption</span></a></li>
		<li><a href="#"> <img src="http://placehold.it/200x150" width="200" height="150" alt="example" ><span> This is the caption</span></a></li>
		<li><a href="#"> <img src="http://placehold.it/200x150" width="200" height="150" alt="example" ><span> This is the caption that may run to more than one line</span></a></li>
		<li><a href="#"> <img src="http://placehold.it/200x150" width="200" height="150" alt="example" ><span> This is the caption that may run to three lines or more and still be vertically centred in respect of the image.</span></a></li>
		<li><a href="#"> <img src="http://placehold.it/200x150" width="200" height="150" alt="example" ><span> This is the caption</span></a></li>
</ul>
</body>
</html>

You just use display:inline-block instead of float which allows you to vertically center the items in respect of each other.

4

Thanks Paul! This is exactly what I was looking for.