Question

css noob here, struggling to figure out how to make the float:left work.
The page that I am trying to fix is here: http://www.yshara.com

1) I would like to align the links: twitter and website on that page to the right of the profile page.

2) How to align the heading ‘Joe Johnson’ etc with the image-container top.

thanks for your help.

Answer 1

Apply clearfix to the parent div as opposed to placing one in the middle:

<div id="profile-frame" class="clearfix">
    <div class="left">

        <div class="photo">
            <img width="103" height="103" alt="TestProfile" src="../images/test_profile_1.jpg">
        </div>
        <div class="profile-details">
            <div class="header">
                <h1>Joe Johnson, Basketball &amp; Atlanta</h1>
            </div>

            <div class="desc">
                Hi my name is Joe Johnson, I am 26 years old and live in Atlanta. I enjoy basketball and twitter. I will be achieving much bigger things once I get better teammates.
            </div>
        </div>
    </div>

    <div class="right">
        <div class="links">
            <ul>
                <li><a href="http://www.atlantahawks.com/">website</a></li>
                <li><a href="http://twitter.com/JoeJoe2ATL">twitter</a></li>
            </ul>
        </div>
    </div>
</div>

EDIT: sorry, didn’nt read your second question. The thing pulling your title down is the margin on <h1> tags. Add this in your CSS:

 .header h1{
    margin-top:0px;
}