jjshell — 2011-07-07T14:06:13-04:00 — #1
In a fluid layout context, I'm having a hard time keeping an input field and a submit button aligned upon resizing down the viewport.
<input type="text" id="search" class="searchfield" value="<?php the_search_query(); ?>" />
<input class="searchsubmit" type="submit" value="search" />
I tried to size both input with ems and percentages, but at a certain point, it breaks: the button finds itself displayed below the field.
Is it possible to keep them align no matter how small the parent element stretches? How would you gurus style it?
dresden_phoenix — 2011-07-07T15:04:04-04:00 — #2
it's hard to say w/o seeing your CSS, but this is most likely because you are forgetting to include padding and margin. Because you are wanting this to be relative to the screen ( and am assuming the container is fluid also, you should be using %s)
use this formula, remember to use all the same units of measurement (%s):
Container width(99%)= # of buttons * (width of buttons + padding left + padding right+ margin left + margin right ). I used 99% as my target because, some browsers put a 1px or 2px border around buttons. there are ways to compensate around it but I am trying to keep the explanation basic. So, 1% is a margin of error if you will .
Apply a lil' algebra and you should easily be able to find what values you need to adjust. Hope this helps
jjshell — 2011-07-07T17:14:08-04:00 — #3