0

Please look here to see the problem I've got: http://jsfiddle.net/M8aV5/

#main {
width: 940px;
padding: 20px;
background-color: #ffffff;
}

(you do best by looking at the jsfiddle as I'm not completely sure which code is affecting this problem)

As you can see when more content is added to sidebar the #main div tag doesn't stretch down which makes everything look bad.

For quite a while I have just put a standard height on the #main div tag but right now it feels like I want the content to be able to stretch out how much it want to without it being ugly.

I'd really appreciate some help on this since I've got absolutely no idea where to look for an answer on this.

user2490580
  • 23
  • 3

1 Answers1

0

You need to clear the floats. There are a number of different ways to achieve this. The method I would recommend is called a clearfix. See it in action on your code here: http://jsfiddle.net/M8aV5/1/

.cf:before,
.cf:after {
  content: " "; /* 1 */
  display: table; /* 2 */
 }

.cf:after {
  clear: both;
}

Then just add the .cf class to your container #main. Details about this can be found here: http://nicolasgallagher.com/micro-clearfix-hack/

Another option would be to add overflow:auto property to the #main. See http://jsfiddle.net/M8aV5/2/ for a working example.

This a fairly popular option as well. There is a pretty good discussion between the two options here: ClearFix vs Overflow

Community
  • 1
  • 1
Sean Ryan
  • 6,048
  • 2
  • 25
  • 23