Place objects at the bottom of the container

Question

Place objects at the bottom of the container

Is there a way to align each "Read more" button at the bottom of its respective div without setting a specific height for the divs or changing any markup or style elements?

While pseudo class selectors could be used, is there a simpler approach that would keep the code more clean and straightforward?

View the solution in this working fiddle

.btn{
display: inline-block;
font-family: 'Oswald', sans-serif;  
font-weight: 400px;
padding: 5px 10px;
border: 2px solid #1AC4F8;
color: #1AC4F8;
cursor: pointer;}

html css

Answer 1

Answer №1

Flexbox is the solution.

Using Flexbox will ensure that all columns have equal height and position the button at the bottom of each column.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
*::before,
*::after {
  box-sizing: border-box;
}
.row {
  display: flex;
}
#services {
  background-color: rgb(265, 265, 265);
  color: #424242;
}
#services .col-3 {
  text-align: left;
  float: none;
  display: flex;
  flex: 0 0 25%;
  padding: 10px;
  flex-direction: column;
}
#sevices h3 {
  margin: 10px 0
}
.btn {
  margin-top: auto;
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  font-weight: 400px;
  padding: 5px 10px;
  border: 2px solid #1AC4F8;
  color: #1AC4F8;
  cursor: pointer;
  -webkit-transition: color 0.8s, background-color 0.8s;
  transition: color 0.8s, background-color 0.8s
}

<section id="services">
  <!-- Services Starts Here -->
  <div class="wrapper">
    <h2>SERVICES</h2>
    <div class="divider"></div>
    <div class="row">
      <div class="col-3">
        <h3>Consulting and audit</h3>
        <p>Get help to accelerate your company online from our highly experienced specialists. It is as good as it sounds!</p>
        <a href="#" class="btn">Read more</a>
      </div>
      <div class="col-3">
        <h3>Web Development</h3>
        <p>Professional custom e-commerce and web design to let your business grow at a rapid pace. See how we do that.</p>
        <a href="#" class="btn">Read more</a>
      </div>
      <div class="col-3 right-align">
        <h3>Search Engine Optimization</h3>
        <p>Want to be on Page 1 of Google and Bing? Read about our SEO services that drive more potential customers.</p>
        <a href="#" class="btn">Read more</a>
      </div>
      <div class="col-3 right-align">
        <h3>Pay Per Click Management</h3>
        <p>Attract highly relevant audience with Google Adwords, Display, Retargeting, Facebook, YouTube, Twitter.</p>
        <a href="#" class="btn">Read more</a>
      </div>
    </div>
  </div>
</section>

Answer 2

Flexbox is the solution.

Using Flexbox will ensure that all columns have equal height and position the button at the bottom of each column.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
*::before,
*::after {
  box-sizing: border-box;
}
.row {
  display: flex;
}
#services {
  background-color: rgb(265, 265, 265);
  color: #424242;
}
#services .col-3 {
  text-align: left;
  float: none;
  display: flex;
  flex: 0 0 25%;
  padding: 10px;
  flex-direction: column;
}
#sevices h3 {
  margin: 10px 0
}
.btn {
  margin-top: auto;
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  font-weight: 400px;
  padding: 5px 10px;
  border: 2px solid #1AC4F8;
  color: #1AC4F8;
  cursor: pointer;
  -webkit-transition: color 0.8s, background-color 0.8s;
  transition: color 0.8s, background-color 0.8s
}

<section id="services">
  <!-- Services Starts Here -->
  <div class="wrapper">
    <h2>SERVICES</h2>
    <div class="divider"></div>
    <div class="row">
      <div class="col-3">
        <h3>Consulting and audit</h3>
        <p>Get help to accelerate your company online from our highly experienced specialists. It is as good as it sounds!</p>
        <a href="#" class="btn">Read more</a>
      </div>
      <div class="col-3">
        <h3>Web Development</h3>
        <p>Professional custom e-commerce and web design to let your business grow at a rapid pace. See how we do that.</p>
        <a href="#" class="btn">Read more</a>
      </div>
      <div class="col-3 right-align">
        <h3>Search Engine Optimization</h3>
        <p>Want to be on Page 1 of Google and Bing? Read about our SEO services that drive more potential customers.</p>
        <a href="#" class="btn">Read more</a>
      </div>
      <div class="col-3 right-align">
        <h3>Pay Per Click Management</h3>
        <p>Attract highly relevant audience with Google Adwords, Display, Retargeting, Facebook, YouTube, Twitter.</p>
        <a href="#" class="btn">Read more</a>
      </div>
    </div>
  </div>
</section>

Answer 3

Answer №2

If I've understood your request correctly, the following modifications have been made:

.btn{
        display: inline-block;
        font-family: 'Oswald', sans-serif;  
        font-weight: 400px;
        padding: 5px 10px;
        border: 2px solid #1AC4F8;
        color: #1AC4F8;
        cursor: pointer;
        -webkit-transition: color 0.8s, background-color 0.8s;
        transition: color 0.8s, background-color 0.8s;
      position: absolute;
      bottom: 0px;
    }
    .wrapper {
       position: relative;
    }

included position: absolute; in the btn class
added bottom: 0px to complement the position (also in the btn class)
inserted position: relative; in a wrapper class to define where btn aligns itself.

You might need to adjust your existing CSS code to accommodate these changes.

Revised Version Link:

https://jsfiddle.net/exaboofu/

Answer 4

If I've understood your request correctly, the following modifications have been made:

.btn{
        display: inline-block;
        font-family: 'Oswald', sans-serif;  
        font-weight: 400px;
        padding: 5px 10px;
        border: 2px solid #1AC4F8;
        color: #1AC4F8;
        cursor: pointer;
        -webkit-transition: color 0.8s, background-color 0.8s;
        transition: color 0.8s, background-color 0.8s;
      position: absolute;
      bottom: 0px;
    }
    .wrapper {
       position: relative;
    }

included position: absolute; in the btn class
added bottom: 0px to complement the position (also in the btn class)
inserted position: relative; in a wrapper class to define where btn aligns itself.

You might need to adjust your existing CSS code to accommodate these changes.

Revised Version Link:

https://jsfiddle.net/exaboofu/

Answer 5

Answer №3

To achieve the desired layout, a combination of flexbox and absolute positioning can be used:

Visit this link for an example

.row {
  display: flex;
  flex-direction: row;
  padding-bottom:40px;
}
.column {
  flex: 0 0 auto;
  position: relative;
}
.btn-bottom {
  position: absolute;
  bottom: -40px;
  left: 0px;
  right: 0px;
  text-align:center;
}

Answer 6

To achieve the desired layout, a combination of flexbox and absolute positioning can be used:

Visit this link for an example

.row {
  display: flex;
  flex-direction: row;
  padding-bottom:40px;
}
.column {
  flex: 0 0 auto;
  position: relative;
}
.btn-bottom {
  position: absolute;
  bottom: -40px;
  left: 0px;
  right: 0px;
  text-align:center;
}

Answer 7

Answer №4

To enhance the appearance of your website, consider adding additional CSS code. In order to align your button with the bottom, refer to the following CSS snippet:

    #services .right-align h3, #services .right-align p{
        text-align: right;
    }
    #services .right-align .btn{
        text-align:left;
    }

    .btn{
        bottom: 0;
        position:absolute;
    }

Answer 8

To enhance the appearance of your website, consider adding additional CSS code. In order to align your button with the bottom, refer to the following CSS snippet:

    #services .right-align h3, #services .right-align p{
        text-align: right;
    }
    #services .right-align .btn{
        text-align:left;
    }

    .btn{
        bottom: 0;
        position:absolute;
    }

Answer 9

Answer №5

If you're looking to adjust the height of a p tag, setting a min-height can be a useful solution. I recently tested this out and it worked perfectly for me. Feel free to customize the height according to your specific requirements.

#services .row .col-3 p {
  width: 100%;
  min-height: 200px;
}

Answer 10

If you're looking to adjust the height of a p tag, setting a min-height can be a useful solution. I recently tested this out and it worked perfectly for me. Feel free to customize the height according to your specific requirements.

#services .row .col-3 p {
  width: 100%;
  min-height: 200px;
}

Place objects at the bottom of the container

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Including code that is tailored specifically for the Internet Explorer browser on Windows Phone devices

Can you specify the doctype used for XHTML5, which is the XML representation of HTML5?

I'm perplexed by the inner workings of infinite ajax scroll in fetching additional posts

Center align a font-awesome icon vertically next to a paragraph of text

Video with a personalized play button overlay

How to choose elements using jQuery according to their CSS properties?

Pedaling back and forth along a sequence

Having trouble applying CSS styles to the root element despite using a CSS file

The top value in CSS animation fails to change properly

How can I showcase an image using Angular?

Determine with jQuery whether the img src attribute is null

Developing User-Friendly Websites with Responsive Design

Ways to recognize when a button has been pressed

Prevent text from wrapping when using jQuery to animate font size

I am attempting to retrieve the value of a 'td' element using jQuery, but it consistently returns 'null'

Sequentially loading Bootstrap columns as the page loads

Tips for maintaining an active link using CSS

Displaying data in an HTML table using PHP and adding a popup

A fixed header list using CSS with a single scroll bar

Using a JavaScript loop to modify the color of the final character in a word