Using flexbox for layout can cause issues when trying to position elements

I am facing a styling challenge with these buttons contained within a specific div. The CSS for this div is as follows:

div {
font-size: 5vw;
font-family: Calibri, Helvetica, sans-serif;
}
div.IFlexible {
display:flex;    
}
div.yesno {
position: absolute;
bottom: 4vw;
}
div > button{
font-size: 5vw;
flex-grow: 1;
}
<div class="yesno IFlexible">
<button id="addNewOK" class="confirmBut">Confirm</button>
<button id="addNewCancel" class="confirmBut">Cancel</button>
</div>

There are no other elements affecting these buttons directly.

The goal is to position these buttons at the bottom of the screen, evenly distributed and taking up all available space. How can I achieve this?

htmlcssflexboxcss-position

Answer №1

Modified the flex-grow property to flex and included a width of 100% for the div.IFlexible:

* {margin: 0; padding: 0; box-sizing: border-box}
html, body {width: 100%}

div {
  font-size: 5vw;
  font-family: Calibri, Helvetica, sans-serif;
}

div.IFlexible {
  display: flex;
  width: 100%; /* added */
}

div.yesno {
  position: absolute;
  bottom: 4vw;
}

div > button {
  font-size: 5vw;
  flex: 1; /* modified */
}
<div class="yesno IFlexible">
  <button id="addNewOK" class="confirmBut">Confirm</button>
  <button id="addNewCancel" class="confirmBut">Cancel</button>
</div>

Answer №2

You can also implement multiple column layout using CSS https://www.w3.org/TR/css3-multicol/

div {
    font-size: 5vw;
    font-family: Calibri, Helvetica, sans-serif;
}
div.IFlexible {
    column-count:2;
      
}
div.yesno {
    position: absolute;
    bottom: 4vw;
  left:4vw;
  right:4vw;
}
div > button{
    font-size: 5vw;
    width:100%;
}
<div class="yesno IFlexible">
    <button id="addNewOK" class="confirmBut">Confirm</button>
    <button id="addNewCancel" class="confirmBut">Cancel</button>
</div>

Another approach is to utilize display:grid;

div {
    font-size: 5vw;
    font-family: Calibri, Helvetica, sans-serif;
}
div.IFlexible {
    display:grid;
  grid-template-columns:1fr 1fr;
  grid-gap:4vw


div.yesno {
    position: absolute;
    bottom: 4vw;
  left:4vw;
  right:4vw;
}
div > button{
    font-size: 5vw;
    width:100%;
}
<div class="yesno IFlexible">
    <button id="addNewOK" class="confirmBut">Confirm</button>
    <button id="addNewCancel" class="confirmBut">Cancel</button>
  
</div>

You can simply size the container instead of specifying widths:

div {
    font-size: 5vw;
    font-family: Calibri, Helvetica, sans-serif;
}
div.IFlexible {
    display:flex;    
}
div.yesno {
    position: absolute;
    bottom: 4vw;
  left:1vw;
  right:1vw;
}
div > button{
    font-size: 5vw;
    flex-grow: 1;
}
<div class="yesno IFlexible">
    <button id="addNewOK" class="confirmBut">Confirm</button>
    <button id="addNewCancel" class="confirmBut">Cancel</button>
</div>

Answer №3

To make the buttons span the full width (50% each), you can set a 50% width to each button and a 100% width to the surrounding div element.

div {
    font-size: 5vw;
    font-family: Calibri, Helvetica, sans-serif;
}
div.IFlexible {
    display:flex;
    width: 100%;
}
div.yesno {
    position: absolute;
    bottom: 4vw;
}
div > button{
    font-size: 5vw;
    flex-grow: 1;
    width: 50%
}

I hope this explanation is useful for your needs.

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

what's causing the tabs in bootstrap to malfunction

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="http://maxcdn.bootstrapcdn.com/bootst ...

javascriptjqueryhtmlcsstwitter-bootstrap

Saving the selected value from a dynamic dropdown menu in a JavaScript application to a MySQL database

This code successfully saves the values of departments but is encountering an issue with saving the degree value into MySQL. I am currently using PHP for this functionality. Here is the HTML code: <select class ="form-control" name="depa ...

javascriptphphtmlmysqlajax

Tips for achieving a uniform border in Bootstrap's input-group when adding an image

I am working on creating a search box within a navbar and encountering an issue with the border style: https://i.sstatic.net/DCMpX.png My challenge lies in achieving consistent borders - I aim for the icon to have the same border as the "Search..." box w ...

htmlcssbootstrap-4

Seeking a window-adjustable table with stationary headers

I have been searching high and low for a solution to my issue but have come up empty-handed. My goal is to create a table with fixed headers that remain visible while scrolling through the rest of the table. The catch is, I also need it to align properly w ...

javascriptjquerycsshtml-tablefixed-header-tables

Issues with Bootstrap glyphicon not functioning correctly on mobile devices and Internet Explorer

Within my template, there is a navigation button positioned on the left side of the page that remains fixed as the user scrolls down. When clicked, this button triggers a menu to appear. Embedded within this button is a bootstrap glyphicon: <div class ...

htmlcsstwitter-bootstrap

Python script for handling unclickable buttons using Selenium

Having trouble clicking a button with Selenium: Here is the HTML code for each side: "plus de 26 ans" https://i.sstatic.net/ntvmy.png "Moins de 26 ans" https://i.sstatic.net/6jD0m.png Tried using Selenium to create a button clicke ...

pythonhtmlselenium

Fixing an image using parallax effect in jQuery

I have encountered a parallax effect issue while working on this site with pictures. The problem is that the pictures are getting clipped, and I need to figure out how to fix this issue. When I scroll down to a certain length, it cuts off the pictures and ...

jqueryhtmlcssscrollparallax

Guide to making a sliding animation appear when hovering over a menu using jQuery

I have noticed a common feature on many websites, but I am unsure of how to explain it. At times, there are sliding elements in the navigation, like an arrow under menu items that moves when the user hovers over different links. Here is an example of a s ...

javascriptjquerycssnavigationjquery-animate

Is it possible to restrict contenteditable elements to only accept numbers?

Is there a way to restrict contenteditable elements such that only numerical values can be entered? I attempted to use the following code snippet: onkeypress='return event.charCode >= 48 && event.charCode <= 57' However, despite a ...

javascripthtmljqueryvalidationcontenteditable

Is it possible to target elements within a UMAP iframe using CSS?

I have integrated a uMap map into my website. Here is the code: <iframe id="umapiframe" class="iframe-umap" width="100%" height="300px" frameborder="0" allowfullscreen src="//umap.openstreetmap.fr/f ...

javascriptcssgoogle-mapsiframeselector

How can I stop MUI Button from automatically becoming fullWidth?

One of the challenges I encountered was styling a Button component from MUI: export const ButtonStyle = styled((props) => <Button {...props} />)(({ theme }) => ({ marginTop: 8, marginBottom: 8, width: 'auto', borderRad ...

cssreactjsmaterial-ui

Access a webpage on a raspberry pi 3 using a smartphone

I am attempting to view a webpage that utilizes HTML/CSS/JavaScript on my Raspberry Pi. However, my Raspberry Pi will not have internet access but I still want to be able to view this webpage from my smartphone. Due to the fact that my Pi is offline and I ...

javascriptpythonhtmljsonraspberry-pi3

Issues regarding the animation and hover effects of a button

I have successfully created a button with an animation on my webpage. The button pops up after 3-4 seconds, and when the user hovers over it, it widens. However, I'm encountering an issue where the pop-up animation restarts every time the button is ho ...

htmlcss

The ajax request is stuck and unable to finish

I have integrated the CodeIgniter framework into this project. Here is the Ajax function: $(document).ready(function(){ $('#set_like').submit(function (e) { e.preventDefault(); $.ajax({ type: 'post', ...

phpjqueryhtmlajax

Switching to AngularJS for an upgrade

I am working with an AngularJS code and HTML. <input type="text" ng-model="selected" uib-typeahead="demos for demos in demo | filter:$viewValue | limitTo:8"> $scope.demo = ['demo-NV-enable','demo-NV-disable','demo-NV-shutdo ...

htmlangularjs

Having trouble installing node-sass through npm

Currently, I am attempting to install the SASS compiler node-sass in order to compile SCSS code into CSS code. Despite following an online tutorial and replicating the same steps, I keep encountering errors. npm init --yes : this will generate a json file ...

cssnode.jsjsonsass

Appearance template failing to load

After setting up a local website on a new IIS server 8, I encountered an issue where the style sheet was not loading properly. The master page is referencing the style sheet like this: href="/HeadOffice/Styles/HeadOfficeCalendar.css" For example: <l ...

cssasp.netiis

Flip elements in jQuery that are overlapping other elements following them

Utilizing the jQuery flip plugin to create image flip animations within an ejs file in a Node environment. The issue arises where any element positioned below the flip element ends up overlapping with it, causing visual discrepancies. Here is a simple co ...

jqueryhtmlnode.jsejs

The default setting for the calendar picker indicator should be enabled

Whenever I hover my mouse over it, an indicator pops up, but I want to make it the default <input type="date" class="form-control" name="Date" [(ngModel)]="opening_date" (ngModelChange)="Operating()" style="width:550px" required> inp ...

htmlcss

What is preventing Foundation 5 from initializing JavaScript components properly?

I am in the process of upgrading a website that is built with Foundation to version 5.2.0 in order to address some Orbit issues and other improvements. I typically initialize components using data attributes like data-orbit and have had success with using ...

javascriptjqueryhtmlzurb-foundation