Why Isn't This Text Going Inside This Box? - html

Question

Demo
Basically, I'm trying to setup something that looks like this:
However, my code for some reason isn't working. Fist of all, in teh tinkerbin, my arrow image isn't even showing. It works fine on my computer though, so I'm not sure why this is. I also tried jsfiddle and it didn't work there either.
I can get the arrow to be there just fine, but I can't get the text to be centered vertically, let alone even go insie the gray box when the image is there. That is what is confusing me here.
HTML:
<div id="answers">
<div id="arrowcenter"></div><div id="answerstext">Text Next To Arrow</div>
</div><!-- end grayAnswer -->
CsS:
#answers {
width:220px;
height:50px;
background-color:#DDDDDD;
border-top:1px solid black;
border-bottom:1px solid black;
margin-top:20px;
}
#arrowcenter {
width:71px;
height:31px;
background-image:url('http://fortmovies.com/brazil/arrow.png');
background-position:0 50%;
background-repeat:no-repeat;
height:100%;
margin-left:-140px; }
#answerstext {
margin-top:0;
}

Answer 1

1st of all your arrow was isn't showing because you were using margin-left:140px; in #arrow_center
See my Fiddle
Just with 1 <div> Fiddle

Answer 2

This answer is inspired by Mr. Alien's answer of using less markup (id optional).
Reference: jsFiddle
HTML:
<span>Masculino</span>
CSS:
span {
background-image:url('http://fortmovies.com/brazil/arrow.png'); /* 70px x 31px */
background-position: 3px 10px;
background-repeat: no-repeat;
background-color: #DDDDDD;
border-top: 1px solid black;
border-bottom: 1px solid black;
font-family: Arial;
font-weight: bold;
font-size: 30px;
padding: 8px 10px 8px 80px;
}
Status Update: jsFiddle with Div for Navbar method

Answer 3

Just remove margin-left:-140px; and add float:left; to #arrowcenter
Working Demo

Answer 4

Use the tag instead of the tag.
The tag defaults to display: block, which prevents the content of different s to be aligned next to each other. tags default to display:inline; which suits your ideas better. As analternative you could also set those display rules in your css.

Answer 5

#answers {
width:220px;
height:50px;
background-color:#DDDDDD;
border-top:1px solid black;
border-bottom:1px solid black;
margin-top:20px;
}
#arrowcenter {
width:75px;
height:31px;
background-image:url('http://fortmovies.com/brazil/arrow.png');
background-position:0 50%;
background-repeat:no-repeat;
height:100%;
float: left;
}
#answerstext {
margin-top: 16px;
}

Answer 6

Little bit changes that i made in just in your css as follow, and it is working...
#answers {
width:220px;
height:50px;
background-color:#DDDDDD;
border-top:1px solid black;
border-bottom:1px solid black;
margin-top:20px;
}
#arrowcenter {
width:120px;
height:31px; float:left;
background-image:url('http://fortmovies.com/brazil/arrow.png');
background-position:0 50%;
background-repeat:no-repeat;
height:100%;
}
#answerstext {
margin-top:0; float:left; height:50px; line-height:50px;
}

Answer 7

Working Demo
OR
Use this CSS
#answers
{
width: 220px;
height: 50px;
background-color: #DDDDDD;
border-top: 1px solid black;
border-bottom: 1px solid black;
margin-top: 20px;
}
#arrowcenter
{
width: 100px;
height: 50px;
background-image: url('http://fortmovies.com/brazil/arrow.png');
background-position: left center;
background-repeat: no-repeat;
float:left;
}
#answerstext
{
line-height:50px;
margin-left:10px;
font-size:20px;
font-family:Arial;
font-weight:bolder;
}
Use this in HTML :-
<div id="answers">
<div id="arrowcenter">
&nbsp</div>
<div id="answerstext">
Masculino</div>
</div>
I hope it'll helps!! :)

Answer 8

What's the purpose of margin-left:-140px; it moves #arrowcenter off-screen remove it and you'll be fine.
Also set both divs to display:inline-block and vertical align appropriately
#arrowcenter {
...
display:inline-block;
vertical-align:middle;
}
#answerstext {
...
display:inline-block;
vertical-align:middle;
}​
http://jsfiddle.net/XEk5d/