Could you please advise on how to adjust the layout to eliminate the space between the input type="text" and the following div element? When I set the width of the input type="text element to 180px and the width of the subsequent div to 20px, the div overflows and shifts downward. I am trying to avoid using margin-left: -...px on the child div to align them horizontally (since it requires different values for Firefox and Chrome) but I still want both elements to be perfectly inline without any gaps and spanning edge-to-edge of their parent element in all browsers.
Your suggestions are appreciated...
CSS:
#parentDiv {
display: block;
width: 200px;
height: 20px;
background-color: rgb(200,200,200);
border: dotted 2px;
border-radius: 0px 0px 0px 0px;
}
#parentDiv input[type="text"] {
display: inline-block;
width: 175px;
height: 90%;
border: none;
vertical-align: top;
}
#parentDiv div {
background-color: #57c274;
display: inline-block;
cursor: pointer;
color: #ffffff;
text-decoration: none;
height: 100%;
width: 20px;
/*margin-left: -6px;*/
text-align: center;
}<div id=parentDiv>
<input type="text">
<div></div>
</div>