CODEWITHSUNDEEP
htmlcss
user3740791
user3740791

Reputation: 91

Div doesn't expand with text

I am trying to make a forum but the problem is that the div where the text goes doesn't expand in height when the text becomes to long for the div. Instead the text goes outside.

I also need the sidebar (with the userinformation) to expand with the text so it always has the same height as the text.

JSFiddle: http://jsfiddle.net/9stPU/1/

CSS:

.forumContent {
list-style-type: none;
background: #34495e;
letter-spacing: 1px;
width: 1170px;
margin: 0;
color: white;
margin-left: 50px;
}

.forumContent li {
padding: 5px 0 5px 10px;
margin-left: -40px;
min-height: 41px;
}

.forumContent li h3 {
margin: 0;
padding: 0;
font-size: 14px;
}

.forumContent li small {
font-size: 9px;
}

.forumContent a {
color: white;
text-decoration: none;
width: 100%;
height: 100%;
}

.forumContent li:hover {
background: #3E5368;
}

.forumContent a li {
float: left;
width: 366px;
}

.forumContent a li:first-child {
width: 100px;
}

.topicUser {
width: 150px;
float: left;
background: #000;
margin-left: -10px;
height: 100%;
}

.topicUser h3 {
margin-left: 2.5px !important;
}

.topicUser small {
position: absolute;
margin-top: -15px;
margin-left: 7.5px;
}

.topicUser p {
margin-top: 2px;
margin-left: 3px;
}

.topicContent {
width: 1060px;
float: right;
height: 100%;
}

Upvotes: 1

Views: 675

Answers (1)

Hayi
Hayi

Reputation: 6236

ADD :

.forumContent {
  ...
  overflow: hidden; /* ADD THIS */
}

This problem occurs because the height of the container element forumContent is calculated automatically (if it is not specified) as the the sum of the height of non float elements. the height of float elements is not considerate.

Upvotes: 1

Related Questions