How to make content fill space inside <div> tag in html?

Question

I have div that has exact width (280px) and inside it there are 2 hyperlinks and one input text box. The hyperlinks take just a little space. I want the input text box to fill the remaing space in the div. How can I do that ?

Html:

<div class="notificationArea">
    <a>A</a> <a>B</a>
    <input id="Text1" type="text" />
</div>

CSS:

.notificationArea
{
width: 280px;
vertical-align: middle;
text-align:left;
}

Note: I can replace the outer div by something else (for example span) but I'm trying to avoid tables.

---

EDIT: All elements (both hyperlinks and input) should be on the same line.

---

EDIT 2: I want the same think to work when I replace both hyperlinks with images. That is I want a div of fixed width that contains 2 images (fixed size) and input textboxt that will fill the remainig space.

Http:

<div class="notificationArea">
    <img src="someImage" />
    <img src="someImage2" />
    <input id="Text1" type="text" />
</div>

CSS:

.notificationArea
{
    border-style: solid;
    width: 330px;
}
.notificationArea input
{
    width: 100%;
}

What I got is:

---

But what I want is:

So I don't want the input box to wrap. The solution on the picture uses tables that I'd like to avoid if possible.

Answer 1

I know you said:

I'm trying to avoid tables.

But, they make this really easy, so here's a display: table based answer:

Live Demo

I can't think of a more eloquent way to do this without resorting to JavaScript.

CSS:

.notificationArea
{
    width: 280px;
    vertical-align: middle;
    text-align:left;
    background: #ccc;
    display: table
}
.notificationArea a, .notificationArea input {
    display: table-cell
}
.notificationArea input {
    width: 100%
}

HTML:

<div class="notificationArea">
    <a href="#">A</a> <a href="#">B</a>
    <input id="Text1" type="text" />
</div>

Answer 2

You can give a's a specific width and remaining to the input:

CSS:

.notificationArea
{
    width: 280px;
    vertical-align: middle;
    text-align:left;
}
.notificationArea a {display: inline-block; width: 10%;}
.notificationArea input {display: inline-block; width: 75%;}/* 5% for white space */

You can take or give a few points to percentages.