Tips for maintaining proper alignment of the element within the given space and organizing it vertically with appropriate spacing

I am trying to align the elements so that they take up the available space and stay vertically arranged in the same order, but I'm having trouble achieving this.

Is there a way to accomplish this?

Here is my code:

.parent {
  border: 1px solid red;
  width: 50%;
  justify-content: space-evenly;
  display: flex;
}
<div class="parent">
  <button>one</button>
  <button>two</button>
  <button>three</button>
</div>
<div class="parent">
  <button>one</button>
  <button>two</button>
</div>
<div class="parent">
  <button>two</button>
  <button>three</button>
</div>
<div class="parent">
  <button>one</button>
  <button>three</button>
</div>

I would like the result to look like:

https://i.sstatic.net/OX8xK.jpg

htmlcss

Answer №1

If you're looking to utilize CSS Grids for your layout, you may encounter issues with button widths expanding. To address this, additional markup can be added to maintain the desired button sizes. If there is a specific CSS workaround for this problem, I would appreciate any insight.

.parent {
  border: 1px solid red;
  width: 50%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
<div class="parent">
  <div><button>one</button></div>
  <div><button>two</button></div>
  <div><button>three</button></div>
</div>
<div class="parent">
  <div><button>one</button></div>
  <div><button>two</button></div>
</div>
<div class="parent">
  <div><button>two</button></div>
  <div><button>three</button></div>
</div>
<div class="parent">
  <div><button>one</button></div>
  <div><button>three</button></div>
</div>

Answer №2

Kindly test out this snippet of code.

.parent {
  border:1px solid red;
  width:50%;
  float:left;
}
.parent_inner{
width:calc(100% / 3);
float:left;
}
<div class="parent">
<div class="parent_inner"><button class='button'>one</button></div>
 <div class="parent_inner"><button class='button'>two</button></div>
 <div class="parent_inner"><button class='button'>three</button></div>

</div>
<div class="parent">
 <div class="parent_inner"><button class='button'>one</button></div>
 <div class="parent_inner"><button class='button'>two</button></div>
</div>
<div class="parent">
<div class="parent_inner"><button class='button'>two</button></div>
 <div class="parent_inner"><button class='button'>three</button></div>
</div>
<div class="parent">
<div class="parent_inner"><button class='button'>one</button></div>
 <div class="parent_inner"><button class='button'>three</button></div>
</div>

Answer №3

Give this a try!

<style>
  .wrapper,.container {
    border: 1px solid green;
    width: 50%;
    display: flex;
  }

  .container>div {
    width: 33%;
    text-align: center;
  }

  .wrapper>div {
    width: 33%;
    text-align: center;
  }

</style>

<div class="container">
  <div>
    <button>a</button>
  </div>
  <div>
    <button>b</button>
  </div>
  <div>
    <button>c</button>
  </div>
</div>

<div class="wrapper">
  <div>
    <button>a</button>
  </div>
  <div>
    <button>b</button>
  </div>
</div>
<div class="wrapper">
  <div>
    <button>b</button>
  </div>
  <div>
    <button>c</button>
  </div>
</div>
<div class="wrapper">
  <div>
    <button>a</button>
  </div>
  <div>
    <button>c</button>
  </div>
</div>

Learn more about Flexbox from this resource:-

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

Answer №4

Utilize CSS grid to achieve the desired layout, as it is widely supported by major web browsers.

While IE 11 support may be outdated, all other major browsers currently adhere to the latest CSS grid specifications, including Edge.

.parent {
  border: 1px solid red;
  width: 50%;
  /* Define the grid with 3 columns of equal width */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.parent button {
  justify-self: start; /* Align buttons to the left within grid cell */
}

/* Assign buttons to specific grid cells */
.parent button:first-child {
  grid-column: 1;
}

.parent button:nth-child(2) {
  grid-column: 2;
}

.parent button:nth-child(3) {
  grid-column: 3;
}
<div class="parent">
  <button>one</button>
  <button>two</button>
  <button>three</button>
</div>
<div class="parent">
  <button>one</button>
  <button>two</button>
</div>
<div class="parent">
  <button>two</button>
  <button>three</button>
</div>
<div class="parent">
  <button>one</button>
  <button>three</button>
</div>

Answer №5

To achieve this design, the Grid was utilized. For further information, you can visit the following link: https://www.w3schools.com/cssref/pr_grid.asp

.parent {
  border: 1px solid red;
  width: 50%;
  display: grid;
  grid-template-areas: 'auto auto auto';
  grid-template-columns: 33.33% 33.33% 33.33%;
}
<div class="parent">
  <div>
    <button class='button1'>one</button>
  </div>
  <div>
    <button class='button1'>two</button>
  </div>
  <div>
    <button class='button1'>three</button>
  </div>
</div>
<div class="parent">
  <div>
    <button class='button1'>one</button>
  </div>
  <div>
    <button class='button1'>two</button>
  </div>
</div>
<div class="parent">
  <div>
    <button class='button1'>two</button>
  </div>
  <div>
    <button class='button1'>three</button>
  </div>
</div>
<div class="parent">
  <div>
    <button class='button1'>one</button>
  </div>
  <div>
    <button class='button1'>three</button>
  </div>
</div>

Answer №6

Include the following CSS code in your stylesheet:

.button{
  width: 100%;
  vertical-align: middle;
}

Instead of using <button>, make sure to use <button class="button">

Check out this live demo

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

Tips for utilizing the setInterval function in javascript to update the background color of the body

Currently, I am tackling a project for my course and I am seeking to modify the body's background color on my website randomly by leveraging the setInterval technique in my JavaScript file. Any suggestions on how to achieve this task? ...

javascripthtml

Tips for customizing the color of mat-select placeholder text?

I've been attempting to modify the color of a mat-select placeholder. It functions properly when using 'background-color' but not when using 'color'. Below is my CSS code: /deep/ .mat-select-placeholder { color: red; } .mat-s ...

cssangularangular-material-5

"Upon clicking the submit button, no action is triggered and no _POST values are being received

When a user clicks on my submit button, nothing seems to happen. The HTML code for the button is as follows: <td colspan="3"> <div align="center"> <input name="Decline" id="Decline" value="Decline" type="submit"> ...

phphtmlpostinputsubmit

Angular's ability to support multiple controllers

Help needed! I am new to Angular and struggling to apply multiple controllers to my table. These controllers belong to different modules, specifically from the npm install module called angular-table-resize. However, the table resize feature doesn't s ...

htmlangularjsresize

Using Symfony2 Knp-snappy library for PDF generation, the CSS styling is not being properly imported

Attempting to create a PDF from an html.twig template, but facing some issues... Although the content is correct in the PDF, the layout is missing. It appears that the CSS files are not being imported... Bootstrap from Twitter is being used to handle the ...

phpcsstwitter-bootstrapsymfonypdf

What is the best way to ensure that multiple bootstrap buttons in a row have the same width?

Could you help me figure out how to make the <div id="full"> element take up the full width of its parent container, while also ensuring that the 3 buttons inside share this width and have equal sizes with gaps between them? https://i.stac ...

htmlcssbootstrap-5

Issue with flex-grow property not functioning as expected in Internet Explorer 11

Hello! I'm running into an issue with flexbox in Internet Explorer: http://jsfiddle.net/EvvBH/ I've noticed that the #two element has flex: auto, which is meant to make it expand to fill the container, even if there's limited content. Ho ...

cssinternet-explorerflexbox

How can I align the CSS Horizontal Menu directly under the parent menu instead of its current incorrect x-position?

I am working on creating a horizontal drop-down menu using CSS. However, I'm facing an issue where the submenu either appears all the way to the left of the website (when I use position: absolute) or directly to the left of the menu (when set to posit ...

cssmenupositioning

Tips for positioning an inner div within an outer div

Code Snippet: <div style="width: 300px; position: absolute; right: 25%; top: 5%; -webkit-box-shadow: 2px 4px 40px 0px rgba(0,0,0,0.75); -moz-box-shadow: 2px 4px 40px 0px rgba(0,0,0,0.75);box-shadow: 2px 4px 40px 0px rgba(0,0,0,0.75);"> <secti ...

htmlcss

Using Javascript within an HTML document may not provide the intended functionality

My script: <!DOCTYPE html> <html> <head> <script> $(document).ready(function () { document.getElementById("saveForm").click(); }); </script> </head> <!--<body onload="document.getElementById('saveForm&apos ...

javascriptjqueryhtml

Detecting changes in checkbox states

In my current scenario, I have a section of the screen that can be shown or hidden depending on whether a checkbox is checked. The user can change the state of the checkbox manually or programmatically. The challenge lies in detecting this change and upda ...

javascriptjqueryhtml

Tips for placing a background color *behind* a bootstrap button

When a button is clicked, I want to display an input with a background surrounding both the button and the input. Currently, my markup renders like this: https://i.sstatic.net/rxaPt.png So when the button is clicked, I need a yellow (alert-warning) backg ...

htmlcssbootstrap-4

Add an item to the second occurrence of a specific HTML class

I am facing a challenge where I need to add an element to another element, but the target element is only identified by a class that is used multiple times. Specifically, I need to append to the last or second occurrence of the element. You can see a visua ...

javascriptjqueryhtml

Exploring the process of performing an AJAX JQuery HTTP request using JavaScript and PHP on the server side - any tips?

Greetings! I have developed a web application using HTML, CSS, and JavaScript. To enhance functionality, I have integrated Bootstrap and jQuery into the project. The application comprises both client-side and server-side components. Let's take a look ...

javascriptphpjqueryhtmlajax

What is the process for making a custom Radio-Button and Checkbox div mandatory?

I stumbled upon a creative way to design custom and accessible Radio- and Checkbox-Buttons by using divs and the aria role="radio" recommended by W3C. Check out the solution here <div role="radiogroup" aria-labelledby="group_label_1" id="rg1"> & ...

javascriptjqueryhtml

Attempting to arrange six images in a row using dividers

Having trouble aligning six images (2 per row with text in between) to the center of your webpage? Don't worry, we've got you covered! Check out the screenshot attached for reference and let us know how we can assist. Click here for a snapshot of ...

htmlcssimagecentering

Guide to setting up the primary navigation in the WordPress administration panel

I recently started using WordPress and I'm struggling with changing the main menu href category. I've tried looking for the header in the FTP files, but I still can't figure out how to do it. I've read through all of the WordPress help ...

phphtmlwordpress

Retrieve and modify the various elements belonging to a specific category

I'm currently developing a chrome extension and I need to access all elements of this specific type: https://i.stack.imgur.com/sDZSI.png I attempted the following but was unable to modify the CSS properties of these elements: const nodeList = documen ...

javascriptcssgoogle-chromegoogle-chrome-extension

The color scheme detection feature for matching media is malfunctioning on Safari

As I strive to incorporate a Dark Mode feature based on the user's system preferences, I utilize the @media query prefers-color-scheme: dark. While this approach is effective, I also find it necessary to conduct additional checks using JavaScript. de ...

javascripthtmlcsstypescript

Tips for ensuring that hover:after contents do not impact the positioning of the next element

I have created a photo list section on my webpage. <div id="main_post_photo"> <% for(var q=0;q<resolve.length;q++){ if(resolve[q].images.length>=1){%> <a href='/post/<%= resolve[q]._ ...

htmlcss