SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard
    Join Date
    Jan 2005
    Location
    blahblahblah
    Posts
    1,447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

    Code:
    <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.

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,804
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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

  3. #3
    SitePoint Wizard
    Join Date
    Jan 2005
    Location
    blahblahblah
    Posts
    1,447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep. Solved.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •