How to remove space between Div Tables - css

Question

As you can see in this fiddle there is a space between the two bottom divs. How do I go about fixing this issue?
The HTML
<div id="textbox"></div>
<div id="textboxSquare"></div>
<div id="textboxSquare"></div>
The CSS
* {
margin: 0; padding: 0;
}
#textbox {
border: 1px solid #848484;
-webkit-border-top-left-radius: 30px;
-moz-border-radius-topleft: 30px;
border-top-left-radius: 30px;
-webkit-border-top-right-radius: 30px;
-moz-border-radius-topright: 30px;
border-top-right-radius: 30px;
outline:0;
height:25px;
display: block;
box-sizing: border-box;
width: 300px;
padding-left:20px;
padding-right:20px;
}
#textboxSquare {
display:inline-block;
box-sizing: border-box;
height:25px;
width: 150px;
border: 1px solid #848484;
}

Answer 1

Put all of those <div>s on the same line and it'll go away.
It's a problem with display: inline-block;
Here's a reference for ya:
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Fixed your fiddle
Look at that didn't even notice the other error: Use an #ID only once. The document will only be searched until the very first #ID is found, then it stops.
<div id="textbox"></div>
<div id="textboxSquare"></div> <!-- This id="" must be unique to all others in the document -->
<div id="textboxSquare"></div> <!-- This id="" must be unique to all others in the document -->
Use a class instead: http://jsfiddle.net/8B875/4/
That fiddle also implements a different approach that uses a float: left; property but you'll have to adjust other things potentially if you go that route.

Answer 2

Add
float:left;
clear:none;
In the #textboxSquare:
#textboxSquare {
display:inline-block;
box-sizing: border-box;
height:25px;
width: 150px;
border: 1px solid #848484;
float:left;
clear:none;
}
Fiddle

Answer 3

Don't use negative margins.
A good way to fight is the letter-spacing trick, where you set the letter-spacing of it's parent div to 0, and then reset it inside the inline-block div to normal

Answer 4

Like said already don't use duplicate ID's. But that's not the problem. Use have assigned display: inline-block; to your DIV's. Simply remove this declaration and add a float:left; to these items.

Answer 5

just remove space between div's in your HTML like this:
<div id="textbox"></div>
<div id="textboxSquare"></div><div id="textboxSquare"></div>
or
<div id="textbox"></div>
<div id="textboxSquare"></div><!--
remove this space
--><div id="textboxSquare"></div>