I have a page where I want an element to align right at the same time I have elements which may be wide and cause a horisontal scrollbar. For instance:

```
<body>
<div style="float:right">Stay right</div>
<div style="white-space:nowrap; clear:both; font-size:2em">
    Wide child element which determines the width of the page.
</div>
</body>

```

This works fine if the wide element fits within the browser window. But if the browser window is too small so that a horisontal scrollbar appears the "stay right" element will align with the window and not the page:

![wrong right alignment](https://i.stack.imgur.com/hO5TC.png)

If I move the scrollbar the "stay right" element moves and doesn't really align to anything.

If a add a table around the whole page it does what I wan't:

```
<body>
<table width="100%"><tr><td>
<div style="float:right">Stay right</div>
<div style="white-space:nowrap; clear:both; font-size:2em">
    Wide child element which determines the width of the page.
</div>
</td></tr></table>
</body>

```

The "stay right" element will align with the right side of the wide child element regardless of browser window size.

Edit: The table based solution above will align right to ***largest of*** the width of the wide child element ***or*** the window width. Effectively this gives the page a "minimum width" which is determined by the contents of the page (ie. the wide child element). This is what I want - which isn't clear from the original text, sorry.

I am wondering if there is a better way than wrapping the entire page in a table.