Question

I’m to implement a fullscreen layout for a Web app according to custom specs. I’ve got most of it under control but there’s one part I have some trouble with.

To economize on space in an otherwise already crowded GUI, a “Log out” button should go into the title row rather than elsewhere. The title row, of course, contains a title. The button should appear in its default dimensions for the given browser/opsys combination at the top right, with a little padding. The title should be centered in the remaining space in that row. Here’s a picture:

+====================+=======+
|    ACME Widgets    | [Btn] |
+====================+=======+

I don’t know how wide the button will be, nor should I need to. The layout should scale smoothly on a range of devices and resolutions, from about 200 px width to 2000:

+==================================================+=======+
|                   ACME Widgets                   | [Btn] |
+==================================================+=======+

…with the title continuing to be centered in its area, which again will always be (total available width – width required for the button). The page may end up being used in a JavaScript-less environment, so dynamic size calculation is not an option. Nor (before you ask) is talking the customer out of his design.

Can anyone please suggest HTML (and, if required, CSS) to achieve this layout?

Update More constraints/explanation (sorry): This app could be viewed by people with poor vision, who like to use their zoom button (Ctrl–+) to blow up font sizes. Therefore, I’d like to go with as few assumptions about things like text sizes as possible. Obviously, on a tiny display with big zoom I would eventually not have enough space for the unpadded title and button; but until then I’d like to stay flexible.

Answer 1

I have two possible solutions. I will admit, they seem like these are simply modifications to some answers already given but should hopefully address the comments you’ve left so far.

CSS approach:

Lets say you determine that a nice width for your button is 5em. This of course scales with the browser’s text zoom to always be, well, 5em.

Then perhaps you could float this to the right, and put a margin-right on your title of 5em.

#buttonContainer {
 float:right;
 display:inline;
 width:5em;
 text-align:right;
}
#titleContainer {
 text-align:center;
 margin-right:5em;
 border:1px solid blue;
}

<div id="buttonContainer">
    <input id="btnLogOut" type="button" value="Log Out" />
</div>
<div id="titleContainer">
    <h1 style="text-align:center;" id="title">ACME Widgets</h1>
</div>

This approach may not be picture-perfect, but you can tweak the em unit and arrive at a nice solution hopefully.

Table-approach:

Another approach is a modification of the table-based approach given by borayeris. I have modified this to not make any assumptions about the width of the button…

<table border="0" width="100%">
  <tr>
    <td width="99%" align="center">ACME Widgets</td>
    <td width="1%" align="right">button</td>
  </tr>
</table>

Good luck!