Fluid layout: keep field and button aligned

Hello,

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?

Regards,

-jj. :slight_smile:

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

Yep. Solved.
:tup: