Aligning content with CSS styling

Question

Aligning content with CSS styling

I am facing a challenge with aligning buttons in three different td tags, as the text content within each varies. I want the buttons to line up evenly regardless of the amount of text present. Is there a solution that does not involve setting a fixed paragraph height?

Setting a fixed height for the paragraph section is not ideal, as it may restrict the amount of text that can be included. Is there a way to achieve this alignment without such limitations?

Please refer to the following screenshot for reference:

Below is the extracted HTML code (Apologies for any mistakes):

<td width="300" valign="top" height="114">
    <div class="imageTextOverlay_1">BOOK A VISIT</div>
    <a href="/visit-us.aspx">
    <img width="300" height="136" alt="Visit Beaufort Court" src="/media/1281571/visit_us.jpg">
    </a>
<h3>Visit Beaufort Court</h3>
<p>If you would like to find out more about wind energy, solar power, borehole cooling or biomass then come and visit us at Beaufort Court. We welcome schools, colleges, universities, professional bodies and community groups.</p>
<a class="imageButtonOverlay" href="/visit-us.aspx">Book Now >></a>
</td>

The CSS styling used for the buttons is as follows:

.imageButtonOverlay {
    background-color: #78A22F;
    border-radius: 5px 5px 5px 5px;
    color: #FFFFFF;
    float: right;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    margin: 5px 0 20px;
    padding: 5px 7px;
}

html css

Answer 1

Answer №1

Utilizing a table structure, you have the option to segregate your buttons onto a separate row:

<table>
    <tbody>
        <tr>
            <td><!-- First paragraph --></td>
            <td><!-- Second paragraph --></td>
            <td><!-- Third paragraph --></td>
        </tr>
        <tr>
            <td><!-- First button --></td>
            <td><!-- Second button --></td>
            <td><!-- Third button --></td>
        </tr>
    </tbody>
</table>

JSFiddle example.

Answer 2

Utilizing a table structure, you have the option to segregate your buttons onto a separate row:

<table>
    <tbody>
        <tr>
            <td><!-- First paragraph --></td>
            <td><!-- Second paragraph --></td>
            <td><!-- Third paragraph --></td>
        </tr>
        <tr>
            <td><!-- First button --></td>
            <td><!-- Second button --></td>
            <td><!-- Third button --></td>
        </tr>
    </tbody>
</table>

JSFiddle example.

Answer 3

Answer №2

To adjust the button's placement, you may use CSS and specify position:absolute as demonstrated below:

td {
  position:relative;
  padding-bottom:40px;
}
td .imageButtonOverlay {
  position:absolute;
  bottom:10px;
  right:10px;
}

Answer 4

To adjust the button's placement, you may use CSS and specify position:absolute as demonstrated below:

td {
  position:relative;
  padding-bottom:40px;
}
td .imageButtonOverlay {
  position:absolute;
  bottom:10px;
  right:10px;
}

Answer 5

Answer №3

Make sure to include position:relative in the td styles and position:absolute in the a class styles.

td{
    background:yellow;
    position:relative
}
.imageButtonOverlay{
    position:absolute;
    bottom:0
}

See the demo here

Answer 6

Make sure to include position:relative in the td styles and position:absolute in the a class styles.

td{
    background:yellow;
    position:relative
}
.imageButtonOverlay{
    position:absolute;
    bottom:0
}

See the demo here

Answer 7

Answer №4

<div id="unique-table">
  <section>
    <article>
      <h1>Section 1</h1>
      <p>Lorem ipsum dolor sit amet</p>
    </article>
    <article>
      <h2>Section 2</h2>
      <p>Consectetur adipiscing elit</p>
    </article>
    <article>
      <h3>Section 3</h3>
      <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
    </article>
  </section>
</div>

Answer 8

<div id="unique-table">
  <section>
    <article>
      <h1>Section 1</h1>
      <p>Lorem ipsum dolor sit amet</p>
    </article>
    <article>
      <h2>Section 2</h2>
      <p>Consectetur adipiscing elit</p>
    </article>
    <article>
      <h3>Section 3</h3>
      <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
    </article>
  </section>
</div>

Aligning content with CSS styling

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Unable to adjust the canvas size or scale using Fabric.js

Merging Angular with jQuery: Organizing jQuery into a distinct file leads to the error message 'Property 'top' cannot be read because it is undefined.'

Tips for implementing version control for css, js, and jsp files

Guide to adjusting icon placement on top of an image using Bootstrap 4

methods for hiding dropdown menu when clicked in html using javascript

HTML - various incorrect horizontal alignments

How to load a URL into a div using jQuery and then update the div with new content?

Modifying CSS style according to the contents of an HTML element

Replicate the preceding input data by simply clicking a button

Splitting a square into four triangles using CSS styling

Creating a circular text element with text both in the center and around the edges using CSS

Styling the first visible item in ngRepeat using Angular

Pressing the button will add text into the input field

Steps to avoid NuxtJS from merging all CSS files

Is there a way to adjust the size of a video thumbnail to fit within a

JavaScript quiz featuring randomized questions with selectable radio buttons

When the button is clicked, I would like to use JavaScript to toggle the visibility of a div, allowing it to open and

When words are enclosed in a table cell, the fixed table layout ensures that all columns are the same size

What measures can I implement to prevent unauthorized access to my user login page?

Ensuring the height of the HTML element for menu items matches the navigation bar