Make Div Children Share The Parents Width

Basically I got a div parent that consists of 1+ div child elements (with a button within each one). Now I'd like the buttons to fill the entire width of the parent - but share it

Solution 1:

You can enclose them inside a li and use this css:

.buttons > li {
display: table-cell !important; 
width: 1%!important;
float: none !important;
}

.buttons > li >* {
width:100%
}

See jsfiddle

Solution 2:

If you're looking to avoid adding additional markup using pure CSS, Flexbox is what you're looking for.

http://codepen.io/cimmanon/pen/qekml

.buttons {
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.submitbutton {
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

Most browsers support some version of Flexbox, but IE doesn't support it until version 10 (see: http://caniuse.com/#feat=flexbox). Be aware that while older Webkit browsers (including mobile) do support Flexbox, it doesn't work on buttons, which is why I've omitted properties for those browsers.

If you require better browser support than this, you'll need to use an extra element.

http://cssdeck.com/labs/gefz5oxi

<div class="buttons">
  <divclass="foo"><inputclass="submitbutton"type="submit"value="Register"></div><divclass="foo"><inputclass="submitbutton"type="submit"value="Cancel"></div></div>

CSS:

.buttons {
  display: table;
  width: 100%;
  box-sizing: border-box; /* optional */
}

.foo {
  display: table-cell;
}

.foo.submitbutton {
  width: 100%;
}

Solution 3:

You can define the child element widths as a percentage or their parent. Something like this:

<div id="parent" style="width:1000px;">
<div id="child1" style="width:25%"></div>
<div id="child2" style="width:25%"></div>
<div id="child3" style="width:25%"></div>
<div id="child4" style="width:25%"></div>
</div>

In this situation each child element will have a width of 250px.

As per your request, here's the same thing using CSS classes:

<styletype="text/css">.parent {
    width:1000px;
}
.child {
    width:25%;
}
</style><divid="parent"class="parent"><divid="child1"class="child"></div><divid="child2"class="child"></div><divid="child3"class="child"></div><divid="child4"class="child"></div></div>

Solution 4:

As much as tables are dépassé, I would just use a table with one row () and dynamically add cells () for each button. Give the width:100% and you're about done. Most js frameworks that implement Toolbar classes use tables.

Solution 5:

If you are not sure how many childbuttons you will have, you can work with some failsafe classes for your childs.

e.g. something like

.grid4button { width: 25%; }
.grid3button { width: 33.33333% }
.grid2button { width: 50%; }

etc (i guess you get it)

now you need some js that checks for the number of childbuttons and appends the needed classname to each of those buttons.

EDIT:

var childs = $(".buttons").children().length;
$('buttons .submitbutton').addClass('grid'+childs+'button');

could be an examplatory js check with jquery.