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;
}