HTML & CSS
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?
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
This topic is now closed. New replies are no longer allowed.