CSS for Mobie site - search box and button combined 100% width?

Im trying to optimise my site for mobile. Im going with a 1 column liquid layout. The issue im having is that I cant get my search box and submit button to be 100% wide.

This is that I want:

I cant set a fixed width for the search box (an input). It also seems to ignore width: 100% and absolute positioning. Is there anyway of achieving this? I thought maybe if I made the input an inline element it would flow to 100%, but it doesn't seem to. Thanks

UPDATE - What about this: http://jsfiddle.net/jdln/3ms5f/

Ive made the search box 100% wide, but put it in a container div which has 5em of padding on the right. As the container div is 100% wide its knocks the button to the new row, but ive 'lifted' the button with absolute开发者_如何学运维 positioning.

It seems to work well when I resize the window. I thought the layout would be more robust if I used em for the widths instead of px, which means Ive had to normalize the text sizes.

Are there any issues with my solution? Thanks

http://jsfiddle.net/jdln/3ms5f/

Ive made the search box 100% wide, but put it in a container div which has 5em of padding on the right. As the container div is 100% wide its knocks the button to the new row, but ive 'lifted' the button with absolute positioning.

It seems to work well when I resize the window. I thought the layout would be more robust if I used em for the widths instead of px, which means Ive had to normalize the text sizes.

See here: http://jsfiddle.net/chricholson/wCvVB/9/

Notice I have had to turn off the borders from both inputs as these would add up to a number greater than 100% (ie. 80% width plus 2px (the border each side)). You could make the inputs 79% and 19% respectively and then try putting a 1px border.

I have put all inside a div with a width, but this could just as easily be the body tag which is by default 100% wide.

You need to contain the input fields properly and the width needs to be relative to their container. Try something like this:

CSS

.searchbar {
    width:100%;
}

.searchfield, .searchbtn {
    float:left;
}

.searchfield {
    width:70%;
    margin-right:5%;
}

.searchfield input {
    width:100%;
}

.searchbtn {
    width:25%;
}

HTML

<div class="searchbar">
    <div class="searchfield">
        <input type="text" name="Search" value="Search" />
    </div>
    <div class="searchbtn">
        <input type="submit" value="Search" />
    </div>
</div>

DEMO: http://jsfiddle.net/andresilich/pHwYG/