Нужно решение / поддержка с проблемой выравнивания CSS

Question

Я испытываю странное поведение с выравниванием CSS некоторых div на моем веб-сайте.Вот демонстрация проблемы: http://jsfiddle.net/PT3jU/1/

Вы можете увидеть ссылки "Комментарии" "Рассказы" "Подписки" слева, где, как я ожидаю, они будут внизу (ниже всех "Омне текст ").Я не понимаю, почему он так себя ведет.Кто-нибудь может предложить какие-либо решения, пожалуйста?Проблема с #profContent Div (я так полагаю).

HTML

<div id="profContainer">

            <div id="profInfo">
            <div id="profImage">
            <img src="" alt=""/>
            </div>
            <div id="profDetails">
                <ul>
                    <li><b class="underb" style="color: #7da315;">Name</b><b style="color: #7da315;">:</b> Name </li>
                    <li><b class="underb" style="color: #1e8bb4;">Country</b><b style="color: #1e8bb4;">:</b> Country </li>
                    <li><b class="underb" style="color: #c86c1f;">Stories</b><b style="color: #c86c1f;">:</b> Stories <a href="#">see all</a></li>
                    <li>
                        <span style="float: left;">
                            <b class="underb" style="color: #af1e83;">About me</b><b style="color: #af1e83;">:</b> 
                        </span>
                        <span style="display:block; overflow:hidden; padding: 0 0 0 5px;">    About me text...
                        </span>
                    </li>
                </ul>
            </div>
            </div>
        </div>
        <div id="profContent">
            <ul>
                <li style="margin: 0;"><a href="#">Comments</a></li>
                <li><a href="#">Stories</a></li>
                <li><a href="#">Subscribtions</a></li>
            </ul>
        </div>

CSS

#profContainer {
    width: 520px;
}



#profInfo {
    width: 512px;
    margin: 10px 4px 0 3px;
}

#profImage {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

    height: 100px;
    width: 100px;
    padding: 1px;
    float: left;
    background: #535353;
    border: 1px solid #272727;

    -khtml--webkit-box-shadow: 0 1px 2px #d6d6d6;
    -moz-box-shadow: 0 1px 2px #d6d6d6;
    box-shadow: 0 1px 2px #d6d6d6;
}

#profDetails {
    float: right;
    width: 395px;
    line-height: 22px;
}

#profDetails ul {
    list-style: none;
    font-size: 13px;
}

#profDetails a {
    color: #a1a1a1;
    padding: 0 3px 1px 3px;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

    -webkit-transition: 0.15s;
    -moz-transition: 0.15s;
    -o-transition: 0.15s;
    -ms-transition: 0.15s;
    transition: 0.15s;
}

#profDetails a:hover {

    color: #ffffff;
    background: #E89F61;
}

.underb {
    text-decoration: underline;
}

#profImage img {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

#profContent {
    width: 520px;
    background: #000;
}

#profContent ul {
    list-style-type: none;
}

#profContent li {
    float: left;
    margin: 0 0 0 10px;
}

Answer 1

Добавить clear: both к #profContent

#profContent {
    clear: both;
    width: 520px;
    background: #000;
}

Демонстрация рабочей версии:

http://jsfiddle.net/rogal111/sfGZq/1/

Answer 2

Вот пример .

Просто поместите profContent внутрь profDetails ul, например:

<li><ul> <!-- outer li is a list item of the big ul -->
    <li style="margin: 0;"><a href="#">Comments</a></li>
    <li><a href="#">Stories</a></li>
    <li><a href="#">Subscribtions</a></li>
</ul></li>

И ваш CSS:

#profDetails ul {
    list-style: none;
}

#profDetails li ul li {
    float: left;
    margin: 0 0 0 10px;
}

Answer 3

Поскольку #profDetails отображается правильно, то вы видите правильное поведение, но если вы хотите, чтобы #profContent было ниже #profDetails, вы хотите применить clear:right к #profContent:

• http://jsfiddle.net/PT3jU/2/

Answer 4

Добавить число с плавающей запятой в #profContainer и #profContent.

#profContent {
    background: none repeat scroll 0 0 #000000;
    float: left;
    width: 520px;
}
#profContainer {
    float: left;
    width: 520px;
}

Answer 5

Либо установите #profDetails в float: left;, либо добавьте clear: both; в #profContent

Предполагая, что вам действительно нужно, чтобы профдейлы плавали прямо тогда clear - это то, как вы должны проталкивать элемент мимо плавающих объектов

http://jsfiddle.net/PT3jU/4/

Answer 6

#profContent {
    width: 520px;
    background: #000;
    bottom: 0;
    position: absolute;
}

или

#profContent {
    width: 520px;
    background: #000;
    clear: both;
}

Answer 7

добавление overflow:hidden к #profContainer и #profContent, кажется, решает проблему.