Ignoramus in need of CSS sledgehammer to brain-pan

**cathode** · 05-02-2005, 05:11 PM

Hello,

I'm trying to do a simple layout where I have text and a right-aligned photo. I can get it to work with one photo/text combination, but not more than one, as they start betting pushed down when image or text block differs in height.

Here's my test file:

Code:

<html>
<head>
<style type="text/css">
#content{
	border:solid 1px;
	padding: 30px 0 0 10px;
	width: 310px;
}
#photo {
	border: solid 1px;
	padding: 50px 0 0 0;
	width: 190px;
	float: right;
	text-align: center;
}

</style>
</head>

<body>

<div id="photo">image</div>
<div id="content">content goes here</div>

<div id="photo">image</div>
<div id="content">content goes here</div>

<div id="photo">image</div>
<div id="content">content goes here</div>

<div id="photo">image</div>
<div id="content">content goes here</div>

</body>
</html>

The problem is when the content or image goes long. I want everything underneath it to get pushed down, but I want each image to be top-aligned with it's corresponding content item.

Basically I have a fixed width content column, a fixed width image column (that centers differing width images within it) and I need to have gallery-style composition, where a block of text and it's corresponding image are always adjacent to each other.

I appreciate the help, thanks!

**CasaPages** · 05-02-2005, 06:57 PM

you need to use different division ids.... i.e. u need to use photo, photo2 etc.... and content, content2, etc.....

only classes can be used multiple times each division(div id) may only be used once it is unique.....

**chrishirst** · 05-02-2005, 07:11 PM

float both the text and photo divs then put a clearing div between each content/photo pair

Code:

<div id="photo">image</div>
<div id="content">content goes here</div>
<div class="clearing"></div>
<div id="photo">image</div>
<div id="content">content goes here</div>

and your photo and content divs should be using class as any id's should be unique in the document.

Code:

.clearing {
    clear:both;
}