6

Let's say I have a container <div> with some buttons in:

<div class="cont">
    <div class="button">Button 1</div>
    <div class="button">Button 2</div>
    <div class="button">Button 3</div>
    <div class="button">Button 4</div>
    <div style="clear:both"></div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

And assigned some CSS to this:

.cont{
    background:#0F0;
    width:400px;
    height:40px;
    line-height:40px;
}
.button{
    background:#F00;
    float:left;
    height:inherit;
    line-height:inherit;
}

Background colours are just so that I can see what I am doing. I'm wondering if there is a JavaScript-free way to make all of the button <div>s stretch (with equal widths) to the parent <div> and I want them to automatically get the width using the parent <div>. So, yes I could just set the .button width to 25% because there are 4 of them but if I added more buttons I would want them to automatically get a new width.

I hope I explained myself well enough, I did look around but couldn't find anything to suit this. Can I do this in CSS or is it a JS-job?

JSFiddle here.

Thanks.

George
  • 36,413
  • 9
  • 66
  • 103

3 Answers3

24

It can be done with display: table; and display: table-cell;

I know the bad connotations that come with tables but you aren't using table markup, you are just making div's act like tables.

See demo here

<div class="cont">
    <div class="button">Button 1</div>
    <div class="button">Button 2</div>
    <div class="button">Button 3</div>
    <div class="button">Button 4</div>
</div>​

.cont{
    background:#0F0;
    width:400px;
    height:40px;
    line-height:40px;
    display: table;
}
.button{
    background:#F00;
    display: table-cell;
}
​
Andy
  • 14,427
  • 3
  • 52
  • 76
  • Anything which is specified as being a table when not a table somehow is a hack, even in css. +1though for answering the question in a css way – Dave Loepr Nov 23 '12 at 16:32
  • @F4r-20 The only downside is lack of support in certain IE browsers, think its 6 or 7, not sure – Andy Nov 23 '12 at 16:33
  • With CSS3, and more importantly the big players now strictly improving cross - compatibility when it comes to web standards, you should have no problems or bugs using this method - on the newest browsers & systems at least. – tim.baker Nov 23 '12 at 16:33
  • 2
    To add to this, I added styles `table-layout:fixed;` to `.cont` and `word-wrap:break-word;` to `.button` to get the same-width effect. Thanks @Andy, spot on! – George Nov 23 '12 at 16:40
  • 1
    This is a valid and useful solution in many circumstances where there is no better solution. If it were called display:matrix, we'd have no issue. display:table does NOT specify that something is a table. CSS can't do that. It's just a presentational analogy to something we already are familiar with. Not to be confused with .
     – Vlad Mar 02 '15 at 15:00
2

This is a perfect use case of the CSS Flexible Box Model.

HTML5 Rocks has a nice introduction to this.

This needs vendor prefixes and it's not supported on old browsers. There's Flexie which is a polyfill for older browsers.

Alessandro Vendruscolo
  • 14,493
  • 4
  • 32
  • 41
  • 's answer led me to perfect solution for my button-fill-width problem. Display: flex is perfect for filling remainder space and still having min-width; https://css-tricks.com/filling-space-last-row-flexbox/ – georgegach Oct 16 '15 at 15:54
0

I found out that HTML buttons are a bit weird, for example "text-align: center" will alter the position of the buttons in a div, whereas "margin: auto" does not. And also, changing the size of a button makes it's styling different (in Chrome).

An alternative solution may be to make a clickable div, in this way you can also style the button, to be certain of how it looks cross-browser. (HTML5)

<a href="http://example.com">
  <div>
     anything
  </div>
</a>

Reference: https://css-tricks.com/snippets/jquery/make-entire-div-clickable/

Paul
  • 675
  • 1
  • 5
  • 26