CODEWITHSUNDEEP
htmlcssalignment
Ilja
Ilja

Reputation: 46509

Need solution / support with css alignment issue

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

Upvotes: 0

Views: 86

Answers (7)

Alex
Alex

Reputation: 1668

Add float left to #profContainer and #profContent.

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

Upvotes: 1

Purag
Purag

Reputation: 17071

Here's an example.

Just put profContent inside the profDetails ul like this:

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

And your CSS:

#profDetails ul {
    list-style: none;
}

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

Upvotes: 1

rogal111
rogal111

Reputation: 5933

Add clear: both to #profContent

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

Demo of working version:

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

Upvotes: 1

Paul D. Waite
Paul D. Waite

Reputation: 98846

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:

Upvotes: 1

J V
J V

Reputation: 11936

Either set #profDetails to float: left; or add clear: both; to #profContent

Assuming you actually need the profdetails to float right then clear is how you are supposed to push an element past floating objects

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

Upvotes: 1

Ariful Islam
Ariful Islam

Reputation: 7675

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

or

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

Upvotes: 1

Pierre
Pierre

Reputation: 19081

adding overflow:hidden to both #profContainer and #profContent seems to solve the problem.

Upvotes: 1

Related Questions