CODEWITHSUNDEEP
htmlcss
mcan
mcan

Reputation: 2082

Content overflows out of content area

I have a demo. Why are list items overflow out of the white content area and how can i fix it?

body {
    line-height: 1;
    background:#7D93BD;
    font-size: 22px;
}
#content {
    width:80%;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    padding: 10px 20px 30px 20px;
    background-color:#F8F8F8;
    color: #333333;
    font-family: Helvetica, Arial, sans-serif;
}
    #profileInfo {
    position: relative;
    top: 100px;
}
#profileInfo li {
    list-style-type: none;
    line-height: 1.4;
}
#profile_info_title {
    font-weight: bold;
}

Upvotes: 0

Views: 66

Answers (3)

theftprevention
theftprevention

Reputation: 5213

If you need #profileInfo to be pushed down by 100px, then use margin-top instead of top:

#profileInfo {
    margin-top: 100px;
    position: relative;
}

Upvotes: 1

Jacques
Jacques

Reputation: 3774

http://jsfiddle.net/AhSzg/2/

Remove position:relative from #profileInfo

Only use postion if you need it to act a different way that the default. Or remove the top:100px

Upvotes: 1

Michelle
Michelle

Reputation: 1844

You need to remove top:100px from the #profileInfo ul - it's pushing that content down by 100px.

Upvotes: 5

Related Questions