CSS alignment issue with image

Question

Take a look at this image:

http://i.gyazo.com/a5bf5097e6783d4879f12fdba0b2bbec.png

I want to get the "Test" below Profile, a BR html tag produces the above result and I don't want that.

Heres my code for this: http://pastebin.com/raw.php?i=hW3jDrLu

<i class="fa fa-user fa-3x" style="vertical-align:middle;"></i>
<span style="font-size: 12pt;">Profile <span style="color: #979797;font-size:8pt;">Test</span></span>

I would like the "Test" to be right below the Profile header

Answer 1

You may also want to preserve their block property by floating them and using the clear attribute (fiddle here):

HTML:

<div id="Container">
    <img id="Icon" src="http://goo.gl/OJhO2s"/>
    <div id="InfoContainer">
        <span class="profile">Profile</span>
        <span class="test">Test</span>
    </div>
</div>

CSS:

#Icon {
    width: 64px;
    height: 64px;
    float: left;
}

#InfoContainer {
    float: left;
}

#InfoContainer span {
    display: block;
    clear: both;
}

.profile {
    font-size: medium;
}

.test {
    font-size: small;
    color: #444;
}

Answer 2

It's tough to say without seeing more of your code, but I imagine your best bet is putting the img in one div and the text in another. Then you can have a line break in the text within its div and still have the div to the right of the img.

Here is a mock up of how it should work.

Apparently I have to add the fiddle code here as well:

HTML:

<div class="imgC"><img src="http://www.w3schools.com/tags/smiley.gif" alt="Smiley face" height="42" width="42"> </img></div>
<div class="textC"><span style="font-size: 12pt;">Profile <br></span><span style="color: #979797;font-size:8pt;">Test</span></div>

CSS:

.imgC{
    display:inline-block;
    float:left;
}

.textC{
  display:inline-block;
    float:left;    
}