<div class="header_section">
<div class="icon"></div>
example
</div>
.header_section{
background: #C2E1FF;
height: 24px;
line-height: 24px;
padding: 5px;
}
.icon{
background: url(http://mcgrefer.com/images/search.png);
display: inline-block;
height: 24px;
width: 24px;
}
http://jsfiddle.net/Luntegg/2SCvf/1/
How do I align a div with text and a background image inline?