Why are my divs not staying in line?

Question

I am trying to get an Input and a Link element to sit side by side inside a Div element.

I wanted to have the Div and the Link to completely fill the Div element so you cannot see the containing Div around the edges of the Input and Link elements.

However if I set the width of my Link element any wider than 27px is falls to the next line even though I should have up to 31px left of the container Div to fit the Link element in. Relevent HTML and CSS below...

HTML

<section>
        <img src="images/logo11w.png">
        <div name="search">
            <input>
            <a href="#"></a>
        </div>
    </section>

CSS

div[name="search"]{

display: block;
margin: auto;
height: 27px;
width: 572px;
background-color: green;}

input{

display: inline-block;
width: 541px;
height: 27px;
border-style: none;
background-color: yellow;
padding: 0;
margin: 0;}

div[name="search"]>a{
display: inline-block;
width: 27px;
height: 27px;
background-color: red;
margin: 0;}

Could someone explain why my link element cannot be wider that 27px without falling to the next line? I am OK with having the width be only 27px I just wanted to understand why this is happening from a technical standpoint.

Answer 1

inline-block displays the whitespace in the actual layout in the rendered html... one whitespace is 4px . so if you want your link to have 31px width, you need to give margin-left:-4px or remove the whitespace in the actual layout.

<section>
        <img src="images/logo11w.png">
        <div name="search">
            <input><a href="#"></a>
        </div>
    </section>

updated fiddle with no white space: http://jsfiddle.net/x6Mq5/

updated fiddle with margin-left:-4px; http://jsfiddle.net/x6Mq5/1/