css - Dynamic width of absolutely positioned div

Question

So i'm having this:

  <style>
    div {
      position: absolute;
      top: 15px;
      width: 500px;
      background-color: lightblue;
    }

  </style>
  <div>
    <input type="submit" style="float: left" value="leftButton">
    <input type="submit" style="float: right" value="rightButton">

  </div>

an absolutely positioned button bar

What I want: If the user resizes the window and makes it smaller than 500px, the buttons should get closer together instead of adding a scrollbar. Is this somehow possible?

Answer 1

Use width specified as percentage.

width: 80%;

And if you need you can combine this with:

min-width: 30px;

To cover the case where user sizes too small to fit items in div.

If you want flexible button widths you can simply put them in a table row where the table cells are specified using percentages. Then they will size as user adjusts width. And here again you can combine with min-width and padding etc, to keep proper spacing. Eg.

<table style="width:90%;">
    <tr>
        <td style="width:10%;"></td>
        <td style="width:80%;"></td>
        <td style="width:10%;"></td>
    </tr>
</table>

Answer 2

EDIT:

there is a solution!

width: 70%;
max-width: 500px;

This will make your bar adjust to the window width, but never exceed 500px. (optionally, add a min-width also)