Tips for ensuring all buttons are evenly spaced from a surrounding div

Here’s the current setup - 

.box{
background-color: #e61a39;
width: 25%;
float:left;
margin: 0px;
text-align: center;
min-height: 380px;
}

#container{
width: 90%;
margin: auto;
}
<section id="container">
<div class="box">
<img src="https://www.dominos.co.in/theme2/front/images/home/layer-7-1.png">
<h1>Our Menu</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolor</p>
<button>Discover Pizza</button>
</div>
<div class="box">
<img src="https://www.dominos.co.in/theme2/front/images/home/layer-7-3.png">
<h1>Your Nearest Store</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolor</p>
<button>Find Pizza Restaurants</button>
</div>
<div class="box">
<img src="https://www.dominos.co.in/theme2/front/images/home/vector-smart-object.png">
<h1>Birthday Party</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolor</p>
<button>Book Now</button>
</div>
<div class="box">
<img src="https://www.dominos.co.in/theme2/front/images/home/vector-smart-objectcopy-6.png">
<h1>Catering</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolor</p>
<button>Book Now</button>
</div>
</section>

The alignment of my buttons is inconsistent with this code. How can I ensure that all buttons are equidistant from the bottom of each box?

htmlcssresponsive-design

Answer №1

Utilize the position css properties to style elements.

.box{
background-color: #e61a39;
width: 25%;
float:left;
margin: 0px;
text-align: center;
min-height: 380px;
    position:relative;
}
button{
        position:absolute;
        bottom: 10px;
        left:25%;
        right:25%;

}
#container{
width: 90%;
margin: auto;
}
<section id="container">
<div class="box">
<img src="https://www.dominos.co.in/theme2/front/images/home/layer-7-1.png">
<h1>Our Menu</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolor</p>
<button>Discover Pizza</button>
</div>
<div class="box">
<img src="https://www.dominos.co.in/theme2/front/images/home/layer-7-3.png">
<h1>Your Nearest Store</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolor</p>
<button>Find Pizza Restaurants</button>
</div>
<div class="box">
<img src="https://www.dominos.co.in/theme2/front/images/home/vector-smart-object.png">
<h1>Birthday Party</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolor</p>
<button>Book Now</button>
</div>
<div class="box">
<img src="https://www.dominos.co.in/theme2/front/images/home/vector-smart-objectcopy-6.png">
<h1>Catering</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolor</p>
<button>Book Now</button>
</div>
</section>

Answer №2


Here's a method to achieve that

.box{
background-color: #e61a39;
text-align: center;
min-height: 380px;
display: flex;
flex-direction: column;
}

.box .content {
flex-grow: 1;
}

.box .button-wrapper {
height: 40px;
}

#container{
width: 90%;
display: flex;
justify-content: center;
}
<section id="container">
<div class="box">
    <div class="content">
      <img src="https://www.dominos.co.in/theme2/front/images/home/layer-7-1.png">
      <h1>Our Menu</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolor</p>
    </div>
    <div class="button-wrapper">
      <button>Discover Pizza</button>
    </div>
</div>
<div class="box">
    <div class="content">
      <img src="https://www.dominos.co.in/theme2/front/images/home/layer-7-1.png">
      <h1>Our Menu</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolor</p>
    </div>
    <div class="button-wrapper">
      <button>Discover Pizza</button>
    </div>
</div>
  <div class="box">
    <div class="content">
      <img src="https://www.dominos.co.in/theme2/front/images/home/layer-7-1.png">
      <h1>Our Menu</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolor</p>
    </div>
    <div class="button-wrapper">
      <button>Discover Pizza</button>
    </div>
</div>
  <div class="box">
    <div class="content">
      <img src="https://www.dominos.co.in/theme2/front/images/home/layer-7-1.png">
      <h1>Our Menu</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolor</p>
    </div>
    <div class="button-wrapper">
      <button>Discover Pizza</button>
    </div>
</div>
</section>

I utilized the flexbox here (not compatible with ie10 and below).

This approach is adaptable because it doesn't rely on absolute positioning and adjusts based on the content rather than the height of the div above.
By setting the height of the button-wrapper and instructing the 'content' div to occupy the remaining space in the 'box', we create a flexible layout.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Endlessly triggering document.execCommand, the JavaScript selectionchange-EventListener seems to have a mind of

I recently implemented an event listener for selectionchange in the following manner: document.addEventListener("selectionchange", function() { highlight(); console.log("selectionchange-triggered"); }, false); After that, I included the code bel ...

javascripthtmladdeventlistenerselectionchangeddesignmode

The functionality of aria-expanded is not functioning properly when set to false

Having trouble with the bootstrap accordion feature. When the page loads, the accordions are expanded by default instead of being collapsed. I want them to start collapsed and then expand when clicked. Here is the HTML code: <!DOCTYPE html> &l ...

jqueryhtmlcsstwitter-bootstrapweb-deployment

After deploying to Firebase, animations suddenly cease to function

After running npm run-script build and deploying my React app to Firebase hosting with firebase deploy, I encountered an issue where my animations stopped working. I'm puzzled as to why this is happening, especially since I've included keyframes ...

javascriptcssnpmweb-deploymentfirebase-hosting

Having trouble displaying several thumbnails side by side

I am looking to display thumbnails in a row, but they are currently showing up in a single column. I have tried correcting the row class in the HTML template provided, but it is not displaying as desired. Here is how it looks like now {% extends "ba ...

cssdjangodjango-templates

Vue.js component still not transitioning out despite using mode="out-in"

As I navigate my way through learning about vue.js, one issue that has been puzzling me is how to make routed pages fade in and out when a user switches to a new page. Despite thinking it would be a simple task with vue, I have been struggling quite a bit ...

cssvue.jsvuejs3vue-routervue-transitions

Ways to change content within an editable div without altering the current cursor location

In the javascript code below, I am trying to highlight characters after 255 and display them in another div with a different color. $( "#testdiv" ).keyup(function() { if($("#testdiv").text().length>255) { var text = $("#info").text() $("#te ...

jqueryhtmlcontenteditable

Ways to incorporate CSS padding into a website displayed in a webView

I have been trying to figure out a way to apply padding-bottom (Custom CSS) to a webpage fetched from RemoteConfig (URL provided). Unfortunately, I do not have direct access to the webpage's source files for editing. Below is the code snippet in ques ...

javaandroidcssandroid-webview

What are the steps to creating a dynamic, layered column design using HTML?

I'm looking to create a layout that resembles the one on www.PInterest.com, featuring varying numbers of columns depending on the browser width (responsive design). My challenge lies in stacking the boxes vertically with different heights, without let ...

htmlcss

Showcasing MySQL Data With Divs

Is it possible to display images from a MySQL database, specifically two images in a row, using div tags instead of tables? I've searched through various articles on Stack Overflow which all suggest using the table tag. However, I am curious if there ...

phphtmlmysqltwitter-bootstrap

What is the best way to create a three-column layout that completely fills the width of a page, utilizing pixel measurements on two of the columns

Click here for the jsFiddle link: Is it possible to make div2 and Button2 fill the remaining width of the window while using pixel measurements on columns 1 and 3? This formatting will be applied to a form where a textbox needs to adjust its size based o ...

csshtml

Combining Java for the back-end and JavaScript for the front-end: a comprehensive guide

Looking for advice on integrating a Java back-end with a JavaScript, HTML 5 front-end in my web application. Any tips on passing content between the two languages? ...

javajavascripthtmlclient-server

Troubleshooting: CSS Selectors Hover Functionality Not Functioning as

I am having an issue where the styling does not change the display to block when hovering. Any insights or feedback would be greatly appreciated. <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="t ...

htmlcss

Unable to choose the option from the modal that functions similarly to a drop-down menu

I need to choose a field that functions similarly to a dropdown box, but does not actually display as one. The select field reveals its values in a pop-up with values and sub-values that I need to select. Challenges : I'm struggling to locate the ob ...

javahtmlcssxpathselenium

How to properly format an HTML input box for numeric entry and ensure correct formatting of the minus sign

I need assistance with formatting an HTML text input box to only accept numeric values using JavaScript. Specifically, the input should allow digits, a minus sign, or a dot/comma (which will be converted to a dot). However, I want to prevent multiple conse ...

javascripthtmlinputuser-input

PHP Form Submission Issue

I'm currently facing an issue with submitting a form using PHP and PHPMailer. Initially, I created a form based on the complete form example from w3schools. After that, I attempted to send the form via email by integrating PHPMailer, but unfortunatel ...

phphtmlforms

How to save HTML content in a variable for future use in Next.js

When working with Next JS, my code resembles something like this: function Test() { return ( <section> <div>Test</div> </section> ); } Now, imagine that I want to have multiple entries here, gen ...

javascripthtmlnext.js

Troubleshooting Problem with CSS Background-Image in Safari

These questions have been popping up all over the web with little response. I've added some CSS in jQuery like this: $('#object').css('background-image', 'url(../../Content/Images/green-tick.png)'); This works in all b ...

javascriptjquerycsssafari

How can I adjust the size of the renderer in Three.js to fit the screen?

Encountering issues with the code snippet below: //WebGL renderer renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); //TODO: set optimal size document.body.appendChild(renderer ...

javascripthtmlcssthree.js

Showing the image as a backdrop while scrolling through text

How can I create an effect that continuously displays the image while scrolling text in Internet Explorer without using position: sticky or position: fixed? var sticky = document.querySelector('.sticky-container'); var img = document.querySele ...

javascripthtmlcssanimation

Navigating on Blogger can be a tricky task when it comes to searching and

I recently added a Table to my blogger post, along with an input form for readers to easily search data. After finding the code on W3Schools (link here), I implemented it successfully. However, I am looking to make some improvements. Here is my question: ...

javascripthtmlcssblogger