How can I get a button on the side of a text box to be perfectly aligned all the time?

Question

Hi sorry if this question is too basic, but I have been working on it for a while with limited success. Also, I have tried suggestions from similar questions (which is how I have gotten this far) but it is still not good enough.

Basically I have a form that has a lot of text fields, each with their own modifier button. For example:

Here is a sample slightly skewed:

I need the button on the side to be perfectly aligned, as it is in this picture, all of the time. That said every browser I have tried it on displays it differently, chrome either pushes it up or down, and firefox sometimes shows it correctly but when the page is zoomed in it shifts. I have noticed that when I bring zoom to 90% on chrome the buttons line up correctly.

Here is a sample of the HTML (and rails):

<div style="float:left; padding:10px;">
  <%= select_tag :noteMod, options_for_select([["AND"],["EXCEPT"],["OR"]], :selected => params[:noteMod]), class: "squareDropdown" %>
  <%= text_field_tag :note , params[:note], placeholder: "Note", class: "textArea" %>
</div>

CSS

 .squareDropdown{
    border: 0 !important;  /*Removes border*/
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-overflow:'';


    width: 20px; 

    text-indent: 0.01px; 
    text-overflow: ""; 

    font-family: Arial, Sans-Serif;
    font-size:14px;
    background: #bfa75e;
    color:white;
    float:left;
    position:relative;

    height: 22px;
    line-height: 22px;

}   

Does anyone have any ideas on what I could do to achieve more accurate results?

Answer 1

Two easy options: 1) position the container DIV relative and the contents absolute. Position the contents using top/left/right/width/height. Or 2) use your browsers developer tools and keep tweaking the CSS (box-sizing, margin, padding, border, etc., make sure to set all values explicitly).

Answer 2

Try to position your div and its content using flexbox. Here you have very nice and straightforward guide how to use it: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

For your case, the code can look like this:

<div style="float:left; padding:10px;" class: "container">
  <%= select_tag :noteMod, options_for_select([["AND"],["EXCEPT"],["OR"]], :selected => params[:noteMod]), class: "squareDropdown" %>
  <%= text_field_tag :note , params[:note], placeholder: "Note", class: "textArea" %>
</div>

.container {
  display: flex; 
  flex-direction: row;
}

Rest of work is to position your items using proper properties (eg justify-content for container, or flex-shrink / flex-grow for items inside)

Answer 3

 fieldset.search { border: none; width: 243px; margin: 0 auto; background: #222; } .search input, .search button { border: none; float: left; } .search input.box { color: #fff; font-size: 1.6em; width: 190px; height: 30px; padding: 8px 5px 0; background: #616161 url(search_bg.gif) no-repeat; } .search input.box:focus { background: #616161 url(search_bg.gif) no-repeat left -38px; outline: none; } .search button.btn { width: 38px; height: 38px; cursor: pointer; text-indent: -9999px; background: #fbc900 url(search_bg.gif) no-repeat top right; } .search button.btn:hover { background: #fbc900 url(search_bg.gif) no-repeat bottom right; } 

 <form method="get" id="searchform" action="#"> <fieldset class="search"> <button class="btn" title="Submit Search">Search</button> <input type="text" class="box" /> </fieldset> </form>