Question

I am experiencing weird behavior with css alignment of some div’s on my website. Here is demonstration of the problem: http://jsfiddle.net/PT3jU/1/

You can see links “Comments” “Stories” “Subscriptions” on the left, where as I expect them to be at the bottom (below all of the “About me text”). I do not understand why it behaves like that. Can anyone suggest any solutions please?
The issue is with #profContent Div (I assume so).

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

As #profDetails is floated right, what you’re seeing is correct behaviour, but if you want #profContent to be below #profDetails, you want to apply clear:right to #profContent:

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