Как исправить эту проблему с плавающей точкой css?

#css

Вопрос:

новичок в css, пытающийся понять, как заставить float: left работать. Страница, которую я пытаюсь исправить, находится здесь: http://www.yshara.com

1) Я хотел бы выровнять ссылки: twitter и веб-сайт на этой странице справа от страницы профиля.

2) Как выровнять заголовок ‘Joe Johnson’ и т.д. с верхней частью контейнера с изображением.

спасибо за вашу помощь.

1. Интересно, почему вы не используете CSS-фреймворк, поскольку все это будет решено, blueprintcss.org или 960.gs отлично подходят для такой работы.

2. Я посмотрел на 960.gs некоторое время назад и это выглядело очень примитивно. blueprintcss выглядит неплохо. Любые ресурсы для быстрого ввода в курс дела были бы действительно полезны. Спасибо

Ответ №1:

Примените clearfix к родительскому div, а не размещайте его посередине:

 <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;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>

РЕДАКТИРОВАТЬ: извините, не прочитал ваш второй вопрос. То, что уменьшает ваш заголовок, — это поля в <h1> тегах. Добавьте это в свой CSS:

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