Question

I am having trouble getting following items (shown below) to align: basically, a small user avatar and some stats appears to the left of the main body of text by that user, as well as any additional elements below. I have set my whole page to have Bootstrap’s <div class="container"> , and so in other words the user avatar could be aligned to the left most of the page set by the container class, with the main elements coming to the right. I am having trouble getting any of the “additional elements” to line up, and it appears using vertical-align:text-top in my classes are not working.. thanks for your help!

Desired output…

 ----   -------------------------------
|user| |main text ...                  |
|ava-| |                               |
|tar | |                               |
 ----  |                               |
       |                               |
        -------------------------------
        -------------------------------
       |additional elements...         |
        -------------------------------

Answer 1

HTML

<div id="parentDiv">
    <img id="avatar" src="" />
    <div id="rightDiv">
        <div id="mainText">
        </div>
        <div id="elements">
        </div>
    </div>
</div>

CSS

#parentDiv
{
    overflow:hidden;
}
#avatar
{
    float:left;
    width:200px;
    height:300px;
}
#rightDiv
{
    float:left;
    margin-left:10px;
}

Check it out : http://jsfiddle.net/AliBassam/pxY6c/