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

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>开发者_StackOverflow社区;

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.

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>

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.

use a nowrap (white-space: nowrap ) on the div and force the textbox to be width=100%?

  .notificationArea
  {
    width: 280px;
    vertical-align: middle;
    text-align:left;
    white-space:nowrap;
  }
  input
  {
    width:100%;
  }

You could put relatives values to the input for example width:100% and fix the height.

This is quite an old question and the simplest way to make this work on modern browsers is to set the display property to flex.

For example in the pic below, you can extend the div to full height of the other contents using the display property.

display:flex;