Question

I am trying to build a data grid for an Aircraft resource. The page has a header, a link for creating a new record, and the table. I have the following HTML:

<div id=body>
    <h2 class="left">Aircraft</h2>
    <%= link_to 'New...', new_aircraft_path, :class => 'button right' %>
    <div style="clear: both;"></div>
    <table>
        (omitted for brevity)
    </table>
</div>

and the following CSS:

.left {
  float: left;
}

.right {
  float: right;
}

.button {
  (omitted for brevity)
}

The table approximately extends to use about 25% on my screen. The New... button however, which is floating right, extends to far right side of the screen (100%). I need to extend only as far as the table, which is about 25%. How can I constraint the width of the div to only extend as far as the table?

Answer 1

You can define the width of the table to a set number, and then wrap the button in a div with the same width. http://jsfiddle.net/j5GRH/

If the width of the table is flexible, you can add the button inside the table: http://jsfiddle.net/j5GRH/3/