How to place items relatively in HTML?

Consider I have a <div style="margin-top:50px"> and I need to places items in it relatively. There are some elements above <div>. For example, I have a <input type="text" /> and a button. I need to place this at the bottom of the <div> with text input being on left side aligned to parent and and button aligned to right of the parent. The input text must fill the width to button. I dont want to hardcode the px or em.

How do I achieve this ?

Edit: This is how it must look like.

Now I dont want to s开发者_JS百科pecify the length of text input. What I want is the button to be rendered to the right bottom of div and text input must set its width accordingly so as to fill space.

---

Ha! where was the drawing the first time around?

http://jsfiddle.net/eGHjs/

(Looks almost identical in IE7, Chrome, FF).

---

You have at least hardcode the button width to achive that.

<div id="container">
    <div id="bottom">
        <div><input type="text" class="text"></div>
        <input type="submit" id="submit">
    </div>
</div>

div#container {
    height: 200px;
    margin-top: 50px;
    border: 1px solid gray;
    position: relative;
    width: 100%;
}

#bottom {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
}

#bottom div {
    position: relative;
    margin-right: 105px;
}

#container #bottom input.text { 
    width: 100%;
}

#submit {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
}