Member Avatar for solid28

Hey Everyone,

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

At the very bottom of , 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!

Edited by solid28 because: n/a
  • 3 Contributors
  • 3 Replies
  • 129 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by solid28

Dani AI

Generated

Short recap and recommended fixes

The reason the image and text were off is table-cell vertical alignment. 's quick suggestion to align the table row to the top is what made it line up for , but that HTML attribute is obsolete in modern markup. Prefer a CSS rule on the cell instead:

/* modern replacement for valign */
td { vertical-align: top; }

If you want to move away from table layout (recommended), 's float idea works, but a more robust, responsive approach is Flexbox. Use a simple flex row and keep the image responsive:

.content-row { display: flex; align-items: flex-start; gap: 12px; }
.content-row img { max-width: 330px; height: auto; display: block; }
.thumb-text { margin: 0; }

Quick troubleshooting tips

  • Default margins on p (or top margins on inner elements) often create the apparent gap — reset them (.thumb-text p { margin-top: 0; }).
  • Images are inline-level by default and sit on the baseline; in inline contexts img { vertical-align: top; } fixes that.
  • Use DevTools to inspect computed vertical-align, margin, and line-height on the td and its first child to see what is shifting the block.

References: MDN docs on the CSS vertical-align property (vertical-align on MDN), note about table row attributes (tr element on MDN), and Flexbox alignment (align-items on MDN). For WordPress themes, also consider the platform's responsive-image support ().

Recommended Answers

All 3 Replies

Member Avatar for lps

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;
}
Member Avatar for shadowcrawler

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

Member Avatar for solid28

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.