No replies
marbuy
marbuy's picture
Offline
Regular
Last seen: 9 years 41 weeks ago
Timezone: GMT+2
Joined: 2007-05-17
Posts: 28
Points: 25

On my website, I have a box where I want to display a number of thumbnails with at the right side of the image, a short text. Both the image and the text must be clickable and the text must wrap around the image.

OK, I have this working, although the HTML/CSS code might not be the greatest. However, in Firefox, the wrapping of the text is a bit strange. Opera and IE do it OK. I try explaining it here, but you better look at the example below.

As you will see, the long word at the beginning of the text nicely fits within the margins of the box (taking into account the padding). When this longer word is followed by smaller ones, all works fine. However, when it is followed by a single additional word that does not fit anymore on the first line, all words move below the image. When the longer word is followed by two additional words, it works fine again. Forcing a line break does not help.

As said, this might not be the greatest HTML/CSS code, so if there is a better way of doing this...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<html>
<head>
	<title>Test</title>
 
	<style>
		* {margin: 0; padding: 0;}
		img {border: none;}
		a {text-decoration: none;}
		a:hover {text-decoration: underline;}
		body {width: 100%; border: 0; font-family: Arial, Helvetica, sans-serif; font-size: 85%;}
		#bodySection {position: relative; clear: both; 	width: 100%;}
		#leftBox {position: absolute; left: 1%; top: 10px; width: 20%; padding-bottom: 2em;}
		div.thumbnailBox {font-size : .8125em; font-weight: bold; font-style: italic; border: 3px solid Red; padding: 10px 10px 10px 10px; overflow: hidden;}
		div.thumbnailBox p.thumbnail {clear: left; float: left; margin: 0; padding: 0em 0.5em 1em 0em;}
		.floatleft {float: left;}
	</style>
</head>
 
<body>
	<div id="bodySection">
		<div id="leftBox">
			<div class="thumbnailBox">
				<div class="floatleft">
					<p class="thumbnail"><a href="somelink.htm"><img src="http://www.xpragma.com/english/skin/images/bim_58.png" height="58" width="58" alt=""></a></p>
					<p><a href="somelink.htm">12345678901234 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0</a></p>
				</div>
 
				<div class="floatleft">
					<p class="thumbnail"><a href="somelink.htm"><img src="http://www.xpragma.com/english/skin/images/bim_58.png" height="58" width="58" alt=""></a></p>
					<p><a href="somelink.htm">12345678901234 123456</a></p>
				</div>
 
				<div class="floatleft">
					<p class="thumbnail"><a href="somelink.htm"><img src="http://www.xpragma.com/english/skin/images/bim_58.png" height="58" width="58" alt=""></a></p>
					<p><a href="somelink.htm">12345678901234 123456 123456</a></p>
				</div>
 
				<div class="floatleft">
					<p class="thumbnail"><a href="somelink.htm"><img src="http://www.xpragma.com/english/skin/images/bim_58.png" height="58" width="58" alt=""></a></p>
					<p><a href="somelink.htm">12345678901234<br/>123456</a></p>
				</div>
			</div>
		</div>
	</div>
</body>
</html>