Html Layout: Title And Button

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

Solution 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...

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

Good luck!

Solution 2:

You can use a floating div.

<divstyle="float:right">[Btn]</div><h1style="text-align:center;">ACME Widgets</h1>

Edit: second attempt, using a displayed-but-invisible div with the same button as content to center the title in the remaining space (aka doing math in css :)

<divstyle="float:right">[Btn]</div><h1style="text-align:center;">ACME Widgets<divstyle="visibility:hidden">[Btn]</div></h1>

Solution 3:

If table is acceptaable use that

<tableborder="0"width="100%"><tr><tdalign="center">ACME Widgets</td><tdwidth="60">button</td></tr></table>

Solution 4:

Might not be the most elegant solution but something like this should work. This is based off Adrian's solution

CSS

h1 {position: relative; left: 0; right: 100px; text-align: center}
.logout {float: right; width: 100px}

HTML

<divclass="logout">Log me out</div><h1>ACME widgets</h1>