Welcome to the MacNN Forums.

Diggory Laycock · 12:43 PM

Please could anyone help me understand something:

I'd like to have a horizontal row of divs - so I can have several thumbnail images next to each other.

I could use a table - but would prefer not to.

I can't get Divs that contain images to flow inline properly:

http://monkeyfood.com/design/divFlow3/

Why does the image pop out of the top of the div?

Diggory Laycock · Oct 6, 2004, 12:03 PM

Here's the source:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    			"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title>DivFlow 3</title>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<link rel="StyleSheet" href="css/divFlow3.css" type="text/css" media="all"/>	
	</head>
	
	<body>
		<h1>one div with four images in.</h1>
		<div id="justImg">
			<img alt="kitten" src="img/kitten.jpg"/> kitten
			<img alt="kitten" src="img/kitten.jpg"/> kitten
			<img alt="kitten" src="img/kitten.jpg"/> kitten
		</div>
		<p>Note how the images are inline - they repeat to the right until space runs out.</p>
		
		<h1>one div with four subdivs each with one image in.</h1>
		<div id="divPerImg">
			<div class="individualImageDiv"><img alt="kitten" src="img/kitten.jpg"/> kitten</div>
			<div class="individualImageDiv"> <img alt="kitten" src="img/kitten.jpg"/> kitten</div>
			<div class="individualImageDiv"><img alt="kitten" src="img/kitten.jpg"/> kitten</div>
		</div>
		<p>The divs display as blocks by default - they appear below each other, even though they could fit next to each other.</p>
		
		<h1>Same as above, but the 4 'kitten' divs are styled with "display:inline".  </h1>
		<div id="inlineDivPerImg">
			<div class="individualImageDivInline"><img alt="kitten" src="img/kitten.jpg"/> kitten</div>
			<div class="individualImageDivInline"> <img alt="kitten" src="img/kitten.jpg"/> kitten</div>
			<div class="individualImageDivInline"><img alt="kitten" src="img/kitten.jpg"/> kitten</div>
		</div>
		<p>The divs are now inline, but do not resize vertically to contain their images. (Except on IE:Mac - where they do.)</p>
		
	</body>
</html>

and the css:

Code:
h1
	{
		font-size: 0.75em;
	}


#justImg
	{
		border: 1px dotted black;
		padding: 5px;
		
		margin-bottom: 10px;
	}
	
#divPerImg
	{
		border: 1px dotted black;
		padding: 5px;
	}

#inlineDivPerImg
	{
		border: 1px dotted black;
		padding: 5px;
	}
	
.individualImageDiv
	{
		width: 200px;
	
		border: 1px dotted #333;
		padding: 1px;
		margin-bottom: 2px;
	}
	
.individualImageDivInline
	{
		width: 200px;
	
		border: 1px dotted #333;
		padding: 1px;
		margin-bottom: 2px;
		
		display: inline;
	}

registered_user · Oct 6, 2004, 12:46 PM

Here ya go:

http://www.alistapart.com/articles/practicalcss/

Synotic · Oct 6, 2004, 02:24 PM

I didn't look into it much, but try using "float: left" instead of "display: inline", which is what r_u's link basically suggests. Inline elements behave differently from block elements. If you just float the DIVs and keep them as blocks then it should work like you want.

And 'div' is the generic block container. If you just wanted to have an inline element, you should use 'span' instead.

Diggory Laycock · Oct 8, 2004, 11:28 AM

Brilliant, thanks for the link.

I was trying to avoid floating, due to fact that it pops the elements out of normal flow (and therefore can cause the styled element to protrude below its parent element (especially when you are floating an unknown number of elements - e.g. image thumbs out of a DB))

But the spacer div solves that nicely - although it's a slight pity that structural mark-up has to be added for cosmetic purposes.

Thanks again.