Search code examples
htmlcsspaddingcss-tables

Padded background image bullet with text wrap issue

Take a gander at this fiddle:

fiddle sauce

And you can see that the padded bullets for the first 2 h3 elements fly all the way to the left. I am stuck on how to make the h3 elements look like the last h3 element without drastic "div-ing" or changes. Any ideas?

#hiw_bjaCopy
{
    float: left;
    width: 700px;
    margin: 20px;
}

#hiw_specTable
{
    float:left;
    margin: 0 20px 20px 0;
}

#hiw_specTable table td
{
    width: 100px;
    text-align: center;
}

#hiw_bjaPoints
{
    color: #666;
}

#hiw_bjaPoints h3
{
    background: url(http://toastedontheinside.com/wp-content/uploads/2013/09/link_arrow_bl.png) left no-repeat;
    padding-left: 15px;
    color: #516aa2;
}
Solution

  • use display:inline-block; for your h3

    fiddle : http://jsfiddle.net/parslook/we8FR/2/