title: CSS for Mobie site - search box and button combined 100% width?
body: <p>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. </p>
  
  <p>This is that I want:</p>
  
  <p><img src="https://i.stack.imgur.com/Fp4L2.jpg" alt="Width"></p>
  
  <p>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 </p>
  
  <p>UPDATE - What about this:
  <a href="http://jsfiddle.net/jdln/3ms5f/" rel="nofollow noreferrer">http://jsfiddle.net/jdln/3ms5f/</a></p>
  
  <p>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. </p>
  
  <p>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.</p>
  
  <p>Are there any issues with my solution? Thanks </p>