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.