Centre Text Relative to Available Space in CSS

Question

<div style="width: 300px">
<div id="one" style="float: left">saved</div><input type="submit" id="two" style="float: right" value="Submit" />
</div>

I would like div#one to be centred in the space between the left edge of the parent div and the left edge of the submit button.

Answer 1

A few more ways to do it:

<div style="width: 300px">
    <input type="submit" id="two" style="float: right" value="Submit" />
    <div id="one" style="text-align:center;">saved</div>
</div>

It's hard to tell that the text saved isn't centered between the left edge of the container div and the left edge of the submit button.

Here is an exact version of the above:

<div style="width: 300px;">
    <input type="submit" id="two" style="float: right; width:64px;" value="Submit" />
    <div id="one" style="text-align:center;margin-right:64px;">saved</div>
</div>

Answer 2

There are a number of techniques listed here

However, if you simply wanted the "saved" text to be centred, I think you'll need to give a width to #one, e.g.

<div style="width: 300px">
<div id="one" style="float: left;text-align:center;width:80%">saved</div>
<input type="submit" id="two" style="float: right;width:20%" value="Submit" />
</div>

Answer 3

This is an example of a general problem with CSS, which is that there is no way to compute the 'remaining space' in various layouts.

I've run into situations where you (a) need an exact layout, and (b) where you don't know the size of the floating item.

Example:

[---- input field that takes 100% of the remaining space ----] [button of unknown width]

You would think that this was possible, but AFAIK, you have to use tables to achieve this. There isn't even a proposal in CSS for how this would be fixed in the future. sigh