Vertically-aligned text in a sub-table

Highlighted
New Member
2 0 0

I seek to display part of a page as follows: a picture on the left side, and text on the right side.  A description is to be vertically aligned with the top of the picture, and a link to a Contact Us form is to be vertically aligned with the bottom of the picture.

 

Here is how far I got with this:

 

<style type="text/css"><!--
table, th, td {
  padding: 0px;
}

.top-aligned {
  margin-top: 0;
  margin-bottom: auto;}
.bottom-aligned {
  margin-top: auto;
  margin-bottom: 0;}
--></style>

<table height="1%">
	<tbody>
		<tr>
			<td>
				<center><img src="https://cdn.shopify.com/s/files/1/0197/5022/3972/files/enterprise_cloud_720x.png?v=1552314787" width="400" /></center>
			</td>
			<td>
				<table height="100%">
					<tbody>
						<tr>
							<td class="top-aligned">
								<p>Our Enterprise-grade Cloud solution is designed for most of the challenges of the industry.</p>
								<p>Start small and scale up easily. Enjoy access to all of the common cloud features and services, as well as various combinations of Private, Hybrid or Public Cloud solutions.</p>
							</td>
						</tr>
						<tr>
							<td class="bottom-aligned">
								<p><b><a href="https://www.estruxture.com/contact/" target="_blank" rel="noopener noreferrer" style="color: #b2ce54;">CONTACT US</a></b></p>
							</td>
						</tr>
					</tbody>
				</table>
			</td>
		</tr>
	</tbody>
</table>

The result in Shopify looks like this:

 

Capture-shopify.PNG

 

I left the borders apparent to help myself figure how how things were being aligned.  I'll make them invisible once I'm done.

 

I've tried all sorts of googling, HTML, CSS, etc. to get the text to align the way I want it, but no luck.  Making the inner table take up all the height has been somehow impossible so far (yet it works perfectly in HTML previewers outside of Shopify) and I haven't begun to tackle the matter of aligning the two pieces of text.

 

I'm at the end of my wits.  What HTML or CSS will get me to align the two pieces of text properly with the image?

 

0 Likes
Tourist
8 2 2

<style type="text/css"><!--
table {
width: 850px;
}
table, th, td {
padding: 0px;


}

.top-aligned {
display: block;
}
.top-aligned p {
margin-top: 0;
}
.bottom-aligned {
margin-top: 120px;
display: block;
}
.bottom-aligned p {
display: block;
margin-bottom: 0;
}

 

--></style>

<table height="250px">
<tbody>
<tr>
<td>
<center><img src="https://cdn.shopify.com/s/files/1/0197/5022/3972/files/enterprise_cloud_720x.png?v=1552314787" width="400" /></center>
</td>

<td class="top-aligned">
<p>Our Enterprise-grade Cloud solution is designed for most of the challenges of the industry.</p>
<p>Start small and scale up easily. Enjoy access to all of the common cloud features and services, as well as various combinations of Private, Hybrid or Public Cloud solutions.</p>
</td>

<td class="bottom-aligned">
<p><b><a href="https://www.estruxture.com/contact/" target="_blank" rel="noopener noreferrer" style="color: #b2ce54;">CONTACT US</a></b></p>
</td>
</tr>


</tbody>
</table>

0 Likes
New Member
2 0 0

At last, I got to achieve what I sought to do.  It required splitting the picture in two, something I have the luxury to do considering its design.  Whether this would work in another situation or not is debatable.

 

Here's the code I ended up with.  I made it generic for easier copy-pasting, for those who want to do a similar layout.

 

A vertical-align is needed on the basic table/th/td tag in order to kickstart adjustments later on, otherwise applying classes on the TD tags have no effect.  The img tag is then given a "block" display style, which eliminates the bit of blank space that would show up below otherwise.

 

<style type="text/css"><!--
table, th, td {
  vertical-align: middle;
  padding: 0px;
  border: 0;
}

.top-aligned {
  vertical-align: top;
}

.bottom-aligned {
  vertical-align: bottom;
}

.display-block {
  display:block;
}
--></style>

<table align="center">
<tbody>
<tr>
<td>
<center><img class="display-block" src="your-url-here" width="400" /></center>
</td>
<td class="top-aligned">
<p>Lorem ipsun</p>
</td>
</tr>
<tr>
<td>
<center><img class="display-block" src="your-url-here width="400" /></center>
</td>
<td class="bottom-aligned"><p>Dolor sit amet.</p></td>
</tr>
</tbody>
</table>
0 Likes