< previous

next >

Responsive Buttons

by Manuel Strehl

Filed under

Keywords: , ,

an example design

Sometimes there are these Photoshop designs, that make web developers cry. The one on the right is one of those. At first sight there is nothing wrong with it. But when you take into account, that the surrounding box is meant to be of flexible width, things get awful.

The problem is the 10px gutter between the two buttons. This little bit of screen design prohibits a simple use of width: 50% to make the two buttons of equal width. The next option is display: table-cell – but this has its own gotchas, including missing support in IE 6 and 7. We have to resort to something different.

Let’s make us a width, that we can divide by 2 to give us the correct result. How will we do that? Easy: We make the surrounding box 10px narrower by extending the right padding. Then we use width: 50% on the included buttons, e voilá, we have our half-width buttons. However, we must compensate that too large right padding. But that’s quite easy with negative margins:

.container {
  width: auto;
  padding: 10px;
  padding-right: 20px; /* this gives us the correct
                          width for taking 50% below */
}

button {
  width: 50%;
}

.button1 {
  margin-right: 10px;
}

.button2 {
  margin-right: -20px;
}