Ensuring that the justify button's widths align correctly within a container that spans 100% of the

Question

Ensuring that the justify button's widths align correctly within a container that spans 100% of the

Is there a way to achieve this layout similar to the Button Groups in Bootstrap? Check out the example here

This is my current markup:

<div class='button-group'>
  <button>1</button>
  <button>2</button>
  <button>3</button>
</div>

If the parent container (.button-group) has a CSS property of width: 100%;, how can I make the buttons automatically take up 33.33% of the width each, or 25% if there are 4 buttons, and so on...
Is there a way to achieve this using CSS?

I have already tried implementing it on JSFiddle

html css

Answer 1

Answer №1

UPDATE:

If you want to maintain the existing HTML structure, one option is to utilize display: flex (although this may not be supported in older browsers): http://codepen.io/pageaffairs/pen/GLIhc

<!DOCTYPE html>
<html lang="en>
<head>
<meta charset="utf-8>
<style>

.button-group {display: flex;}
button {flex: 1 100%;}

</style>
</head>
<body>

<div class="button-group">
    <button>1</button>
    <button>2</button>
    <button>3</button>
</div>

</body>
</html>

Alternatively, if you're open to adding more markup, you can achieve a similar layout like this: http://codepen.io/pageaffairs/pen/wznGK

<!DOCTYPE html>
<html lang="en>
<head>
<meta charset="utf-8>
<style>

.button-group {display: table; table-layout: fixed; width: 100%;}
.button-group div {display: table-cell;}
button {width: 100%;}

</style>
</head>
<body>

<div class="button-group">
    <div>
        <button>1</button>
    </div>
    <div>
        <button>2</button>
    </div>
    <div>
        <button>3</button>
    </div>
</div>

</body>
</html>

Answer 2

UPDATE:

If you want to maintain the existing HTML structure, one option is to utilize display: flex (although this may not be supported in older browsers): http://codepen.io/pageaffairs/pen/GLIhc

<!DOCTYPE html>
<html lang="en>
<head>
<meta charset="utf-8>
<style>

.button-group {display: flex;}
button {flex: 1 100%;}

</style>
</head>
<body>

<div class="button-group">
    <button>1</button>
    <button>2</button>
    <button>3</button>
</div>

</body>
</html>

Alternatively, if you're open to adding more markup, you can achieve a similar layout like this: http://codepen.io/pageaffairs/pen/wznGK

<!DOCTYPE html>
<html lang="en>
<head>
<meta charset="utf-8>
<style>

.button-group {display: table; table-layout: fixed; width: 100%;}
.button-group div {display: table-cell;}
button {width: 100%;}

</style>
</head>
<body>

<div class="button-group">
    <div>
        <button>1</button>
    </div>
    <div>
        <button>2</button>
    </div>
    <div>
        <button>3</button>
    </div>
</div>

</body>
</html>

Answer 3

Answer №2

If you are looking to create a button group, one way to achieve this is by using a table. It may seem a bit daunting, but it's really not that complicated. Take a look at the example below:

HTML:

<table class="button-group">
<tr>
<td><button class="bt">1</button></td>
<td><button class="bt">2</button></td>
<td><button class="bt">3</button></td>
</tr>
</table>

CSS:

table.button-group {
    width: 100%;
    border: 0;
    border-collapse: collapse;
}
table.button-group td {
    margin: 0;
    padding: 0;
}
.bt {
    width: 100%;
}

If you prefer not to use a table, you can replace the table tags with div elements that have the style display: table;, and the td tags with divs styled with display: table-cell;

In this setup, the tr tag is not needed.

Check out the updated JSFiddle HERE

Apologies if my English is not perfect...

Answer 4

If you are looking to create a button group, one way to achieve this is by using a table. It may seem a bit daunting, but it's really not that complicated. Take a look at the example below:

HTML:

<table class="button-group">
<tr>
<td><button class="bt">1</button></td>
<td><button class="bt">2</button></td>
<td><button class="bt">3</button></td>
</tr>
</table>

CSS:

table.button-group {
    width: 100%;
    border: 0;
    border-collapse: collapse;
}
table.button-group td {
    margin: 0;
    padding: 0;
}
.bt {
    width: 100%;
}

If you prefer not to use a table, you can replace the table tags with div elements that have the style display: table;, and the td tags with divs styled with display: table-cell;

In this setup, the tr tag is not needed.

Check out the updated JSFiddle HERE

Apologies if my English is not perfect...

Answer 5

Answer №3

To create a series of buttons wrapped in a justified button group, simply enclose them in the following HTML structure: .btn-group.btn-group-justified.

Check out the demo here

Here is the HTML code:

2 buttons
<br>
<div class="group justified">
    <div class="group">
        <button type="button" class="btn default">1</button>
    </div>
    <div class="group">
        <button type="button" class="btn default">2</button>
    </div>
</div>
<br>3 buttons
<br>
<div class="group justified">
    <div class="group">
        <button type="button" class="btn default">1</button>
    </div>
    <div class="group">
        <button type="button" class="btn default">2</button>
    </div>
    <div class="group">
        <button type="button" class="btn default">3</button>
    </div>
</div>
<br>

And here is the CSS code:

.justified {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
}
.group {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.justified>.btn, .justified>.group {
    display: table-cell;
    float: none;
    width: 1%;
}

.justified>.group .btn {
    width: 100%;
}

.group>.btn {
    position: relative;
    float: left;
}
.default {
    color: #333;
    background-color: #ccc;
}
.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid;
    border-radius: 4px;
}

Answer 6

To create a series of buttons wrapped in a justified button group, simply enclose them in the following HTML structure: .btn-group.btn-group-justified.

Check out the demo here

Here is the HTML code:

2 buttons
<br>
<div class="group justified">
    <div class="group">
        <button type="button" class="btn default">1</button>
    </div>
    <div class="group">
        <button type="button" class="btn default">2</button>
    </div>
</div>
<br>3 buttons
<br>
<div class="group justified">
    <div class="group">
        <button type="button" class="btn default">1</button>
    </div>
    <div class="group">
        <button type="button" class="btn default">2</button>
    </div>
    <div class="group">
        <button type="button" class="btn default">3</button>
    </div>
</div>
<br>

And here is the CSS code:

.justified {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
}
.group {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.justified>.btn, .justified>.group {
    display: table-cell;
    float: none;
    width: 1%;
}

.justified>.group .btn {
    width: 100%;
}

.group>.btn {
    position: relative;
    float: left;
}
.default {
    color: #333;
    background-color: #ccc;
}
.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid;
    border-radius: 4px;
}

Ensuring that the justify button's widths align correctly within a container that spans 100% of the

Answer №1

Answer №2

Check out the updated JSFiddle HERE

Answer №3

Similar questions

What is the best way to adjust the mobile screen size to display the most optimized version of a web app's

What is the best way to align these two divs centrally within a container set to display as inline-block?

The Flowbite CSS plugin seems to be malfunctioning when attempting to include it within the tailwind.config.js file

Utilizing HTML5 history instead of hash URLs to preserve the user's browsing history

Ensure that only one checkbox is checked at a time and that unchecking one does not remove the

Avoiding a constantly repeating video to prevent the browser from running out of memory

Using HTML to execute a JavaScript function that transforms images

A step-by-step guide on showcasing the content from a textfield onto a dynamic column chart

In a jQuery conditional statement, selecting the second child of the li element for targeting

Utilize .NET MAUI Blazor's customizable light and dark themes by loading unique stylesheets through the headcontent feature

Java: Issue with JLabel Text Alignment

utilizing a background image with a specific div identifier

Python HTMLParser: Extracting HTML tag content made easy!

Display a remote page on hover using Javascript, CSS, and HTML without providing any clickable link

Centering the scroll bar with Flexbox

Having trouble with your GitHub Pages site displaying properly on desktop but working fine on mobile?

What is the best way to achieve maximum clarity in a div element while adjusting opacity?

Issues with Bootstrap columns not displaying correctly in versions 5 with col-sm-6 and col-md-4

What is the best way to transform the HTML retrieved from an AJAX GET request into an object using JQuery?

Achieving Center Alignment for Material-UI's <Table> within a <div> using ReactJS