Question

Please see below the code i have. I am trying to align the name with the image in a way that the name is centered on the right side of the image. I haven’t been able to do it correctly. I tried adding position: absolute; but that still won’t do the trick.

    <div id="contain">
    <div id="baseline">

    <div id="title2">

    <img src="http://www.marketingjava.com/wp-content/uploads/2012/01/
    new-default-twitter-avatar.jpg" id="prof_image">Ariel Smith</div>
    </div>

    CSS:

    #contain {
    width: 770px;
    min-height: 170px;    
    margin: 20px auto 60px auto;
    color: #222222;
    font-size: 15px;    
    position: relative;
    }
    #baseline {
    color: #999;
    }

    #title2 {
    color: #000;
    font-size: 30px;
    margin-left: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    width: 750px;
    }

Answer 1

Float both left and adjust the title with margin to center it.

http://jsfiddle.net/FBj3f/