CODEWITHSUNDEEP
htmlcss
TheMeisterSE
TheMeisterSE

Reputation: 541

Expand box with content

Sorry for a weird title but I don't really know how to describe it easily.

First I'll link my JSFiddle on it http://jsfiddle.net/b7YTd/

When I added the "float: left" and "float: right" the rows jumped outside the box and the box doesn't expand as the content gets "larger".

My question is, how do I make the box expand after the content like it should do with content inside it if it doesn't have a set height?

In order to post my JSFiddle I need to add some code so my CSS:

#profile_friends {
margin-top: 15px;
margin-left: -10px;
background: rgb(240,240,240);
border: 2px solid #555;
border-radius: 3px;
width: 100%;
}

.friend_left {
float: left;
width: 250px;
}

.friend_right {
float: right;
width: 250px;
}

.friend img {
width: 50px;
height: 50px;
float: left;
margin-left: 15px;
margin-right: 8px;
}

.friend ul {
list-style-type: none;
margin-top: -15px;
margin-left: 35px;
}

#profile_friends h4 {
margin: 0;
padding: 0;
text-align: center;
text-transform: uppercase;
color: rgb(110,110,110);
font-weight: bold;
height: 20px;
}

#profile_friends hr {
margin: 0;
padding: 0;
}

Upvotes: 0

Views: 228

Answers (2)

Dennis Carney
Dennis Carney

Reputation: 58

I had this issue, but used overflow:hidden; on the parent div.

http://jsfiddle.net/b7YTd/3/

#profile_friends {
margin-top: 15px;
margin-left: -10px;
background: rgb(240,240,240);
border: 2px solid #555;
border-radius: 3px;
width: 100%;
overflow:hidden;

}

Upvotes: 0

Xarcell
Xarcell

Reputation: 2011

If I understand you correctly use:

#friendlist {
    overflow: auto;
}

http://jsfiddle.net/b7YTd/1/

Upvotes: 2

Related Questions