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

What is the process of creating a download link for a server file in a web browser?

What is the best way to apply a top padding to a background image using CSS?

Styling CSS: Adjusting font sizes for placeholders and text boxes

Attempting to verify the HTML output, yet it remains unspecified

What is the best way to set the active class on the initial tab that is determined dynamically rather than a static tab in Angular?

What causes my divs to change position when using text <h1>?

Is it possible to alter the value and label of an HTML button in a permanent manner?

What is the reason behind the jQuery only functioning properly on Internet Explorer 8 on this particular page and no other browsers?

How to align text to the left and image to the right using CSS

Floating point expansion caused by the addition of padding

Center the navbar menus at the bottom

CSS animations are not functioning properly on disabled Bootstrap buttons

My Jquery CSS Checkbox is failing to register when it's checked

Preventing context menu from appearing on a right click by implementing a trigger to re-enable it

Retrieving extra data from JSON

What is the best way to set the width of an iframe within a <td> element to be 33% of the screen?

Incorporate PHP form and display multiple results simultaneously on a webpage with automatic refreshing

Get the values of var1 and var2 from the URL in PHP, for example: `example.php?var1

Obtain and display pictures in HTML

Ways to create a line break within an <input> element with type="text"