Placement of icon with text issue in fluid layout - css

Question

Am trying to make things look like the above image, this is for the fluid layout, but no matter what i do, that phone icon with the number 1-844.....does not move to right next to talk to us. Here is JS fiddle: http://jsfiddle.net/xtf205mk/
.fluid {
clear: both;
margin-left: 0;
width: 100%;
float: left;
display: block;
}
.top_nav_icon {
vertical-align: middle;
}
.call_icon_header {
content: url(images/call-us-icon.png);
float: left;
}
.talk_icon_header {
content: url(images/talk-to-us-icon.png);
float: left;
}
.float_right {
float: right;
}
.top_nav_icon {
vertical-align: middle;
}
.top_nav_list1 {
float: left;
}
.top_nav_list1_1 {
font-size: 1em;
width: 100%;
float: right;
}
.top_nav_list1_2 {
font-size: 1em;
width: 100%;
clear: none;
}
.top_nav_list1_2 {
font-size: 1em;
width: 100%;
clear: none;
}
Am using DW CC, but the visual aids is nowhere helping me in moving things to the right.
Can anyone help with this one please, thank you.

Answer 1

I've used pseudo elements to achieve your functionality requirements:
The main point to note that I want you to take from here is my use of display:inline-block;
.phone,
.talk {
position: relative;
display: inline-block;
padding-left: 50px;
height: 20px;
width: 150px;
padding-top: 10px; /*this is to 'vertically align' the text (adjust for your image height)*/
}
.phone:after {
content: "";
position: absolute;
height: 40px;
width: 40px;
left: 0;
top: 0;
background-image: url(http://placekitten.com/g/200/300); /*change to phone icon*/
}
.talk:after {
content: "";
position: absolute;
height: 40px;
width: 40px;
left: 0;
top: 0;
background-image: url(http://placekitten.com/g/200/300); /*change to chat icon*/
}
<div class="phone">phone here</div>
<div class="talk">chat here</div>
As a side note, I would like to point out my personal hate for floating elements, as this really can mess things up in terms of positioning elements.
This is why we have display and positioning css rules for.