Question

I’m working on a mobile template for my site and I want a textbox inside a div to be width:100% with an html submit button beside it, however the button always seems to wrap to the second line. Can someone help me out with some CSS for this?

<style type="text/css">
    .form_input {}
    .form_submit{}
</style>

<div>
    <input type="text" name="s" value="" class="form_input" />
    <input type="submit" value="Search" class="form_submit" />
</div>

Answer 1

The wrapping happens because of the workings of the css box model. 100% means 100% of the context box. So the input field will fill the line completely -> the submit button has to wrap to the next line. You can give the input box a width of e.g. 80% and the submit button a width of 20%.

I guess what you really want to do is something like input{ width: 100% – 200px }, submit {width: 200px}. That is not possible with css2.