Question

I have the following problem:
I am trying to make 3 links/anchors (with padding and border X and margin 0) be of equal size (or at least the first and the last) and all 3 of them together to span 100% of the parent width.

No matter how I tried it, it doesn’t get nowhere near to be cross-browser (new browsers, not crappy IE7) so I was curios if anybody out there knows how to do it

Example code:

<style>
.menu{
  background : lightblue;
  width      : 320px;
  text-align : center;
}
.btn{
  display    : inline-block;
  background : #fff;
  border     : 1px solid #666;
  padding    : 5px 10px;
}
</style>

<div class="menu">
  <a href="#" id="btn1" class="btn">Btn1</a>
  <a href="#" id="btn2" class="btn">Btn2</a>
  <a href="#" id="btn3" class="btn">Btn3</a>
</div>

Now I tried everything from adding them to a table with 3 columns to setting box-sizing:border-box; but nothing seems to work

The desired result is having the total width of the 3 anchors equal to the parent width (320px)

Answer 1

How about something like this? You can use the display as table css property. You say you want cross browser, but you don’t say what versions you need to support.

http://jsfiddle.net/9rwQY/3

.menu{
  display    : table;
  background : lightblue;
  width      : 320px;
  text-align : center;
}
.btn{
  display    : table-cell;
  width      : 33%;
  background : #fff;
  border     : 1px solid #666;
  padding    : 5px 10px;
}