Question

I got a buttons row in the following html:

HTML :

<div class="buttons">
     <div><input type="button"/></div>
     <div><input type="button"/></div>
     <div><input type="button"/></div>
     <div><input type="button"/></div>
</div>

CSS :

.buttons > div
{
   float:left;
   margin-left:25px;
}

For some rows, the buttons, only 3 buttons will be visible, some will have only 2 buttons visible.

How do I make the visible buttons take up the entire space of the buttons row so that there is enough space between the buttons (the buttons itself shouldn’t be resized except the margin left space)? Width of the buttons row is 600px.

Answer 1

Make your “row” a list:

<div class="buttons">
   <ul>
      <li><input type="button"/></li>
      <li><input type="button"/></li>
     <li><input type="button"/></li>
     <li><input type="button"/></li>
  </ul>
</div>