Fit element next to another one?

Question

I'm trying to position a little down arrow beside a textbox.

jsFiddle example

How can I make the box fit snuggly against the input, such that their tops and bottoms align?

Must be a way to grab the position info was JS/jQuery and then... what, should I absolute-position it?

---

Edit: Got it pretty darn close to how I want. It's still a little off in IE8... anyway I can nudge it over?

Answer 1

This is definitely not something that should require JavaScript.

My first suggestion would be to try using a button or input[type=button] element instead of a span, I have always had better luck lining up text boxes with real buttons than fake ones.

Here is what I see when I convert the elements to buttons:

It is not a perfect solution, but with some minor tweaking to the button and textbox styles you should be able to make it work.

Keep in mind, different browsers use different default styles for rendering form widgets, so it can be hard coming up with a universal solution, note the difference in the textbox border.

The difference is more dramatic in your original example:

You will definately want to apply a custom style to the text box in order to get consistent and predictable results.

Answer 2

.cb-arrow {
    cursor: pointer;
    background: -moz-linear-gradient(center top,
        rgb(242, 242, 242) 0%,
        rgb(221, 221, 221) 50%,
        rgb(207, 207, 207) 100%)
        repeat scroll 0% 0% transparent;
    border: 1px solid #707070;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 3px;
    padding: 0 3px;
    margin-left:-5px
}


.combobox { border:1px solid #BBB; padding:2px 2px 1px 2px; margin:0 }

Not the prettiest solution but will work.

//EDIT: VERSION TWO

Scrap the javascript (for now). Add a container. Looks good in all, consistent in FF and Chrome:

HTML:

<div id='container'>
  <input type="text" class="combobox" />
  <button type='button' class='cb-arrow'>&#9660;</button>
</div>

CSS:

#container { height:20px;line-height:20px }

.cb-arrow {
    border: 1px solid #707070;
    background:white;
    margin:0;
    padding:0;
    margin-left:-5px;
    vertical-align:middle;
}

.combobox { 
    border:1px solid gray; 
    border-right:0;
    vertical-align:middle;
    padding:1px
}

Answer 3

seems to work in IE and FF. i do not have chrome.

<style>
#container *
{
    border: 1px solid black;
    float:left;
    margin:0;
    padding:0;
}
#container .cb-arrow
{
    height:22px;
    line-height:22px;
    width:20px;
}
#container .combobox
{ 
    border-right:0px;
    height:20px;
    line-height:20px;
}
</style>
<div id='container'>
    <input type="text" class="combobox" />
    <button type='button' class='cb-arrow'>&#9660;</button>
</div>