Hey Everyone,

I am trying to get some HTML/CSS working for my wordpress theme.

At the very bottom of this page, there is a thumbnail from the most recent post and there is an excerpt that should show up right next to the image.

I have been using code like this:

<div class="block-content frontsplash-block">
			<table cellspacing="0" cellpadding="0" border="0" width="1020">
				<tbody>
					<tr>
						<td align="right" width="330">
							<a href="<?php the_permalink() ?>">
								<?php the_post_thumbnail($homepage_thumbnail_size); ?>
							</a>
						</td>
						<td align="center" width="30">&nbsp;</td>
						<td align="left" width="690">
							<div>
								When you decide to grow marijuana with a hydroponic system, it can be incredible difficult compared with traditional planting in soil. While you will see faster growing times and a higher yield at harvest, getting all the components, nutrient, water, and lighting levels correct can be a particularly challenging aspect to hydroponic growing of marijuana.
							</div>
						</td>
					</tr>
				</tbody>
			</table>
		</div>

I have also swapped out the inner div's for <p> tags and I still cannot get the top of the text in the right <td> to line up with the top of the image.

Any recommendations on how to get the tops to line up (without doing some hack like "position:relative;"?

Thanks so much for your help...I've been trying to fix this for many hours!

Recommended Answers

All 3 Replies

My recommendation is that don't use table and assign float:left to your image. For example:

<div class="block-content frontsplash-block">
			<a href="<?php the_permalink() ?> ">
								<?php the_post_thumbnail($homepage_thumbnail_size); ?> 
			</a> 
			<div> 
				When you decide to grow marijuana with a hydroponic system, it can be incredible difficult compared with traditional planting in soil. While you will see faster growing times and a higher yield at harvest, getting all the components, nutrient, water, and lighting levels correct can be a particularly challenging aspect to hydroponic growing of marijuana.
			</div> 
		</div>

and put CSS as:

.block-content img{
float:left;
padding:5px;
margin-right:10px;
}

Have you tried <tr valign="top"> ?

Thank you, that worked fine ^^

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.