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

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>

Answer 3

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 (e.g justify-content for container, or flex-shrink/ flex-grow for items inside)