Falling out of divs

HTML & CSS
1

Hi,

My CSS skills are quite raw, I did the CSS live course with sitepoint but I’m still quite amature with CSS and this issue is driving me nuts :sick:

I’m using this template that I bought and I’m trying to create a UI inside the main content area but the UI keeps falling out of the content area. I put a float: left on the content area and this solved the problem of the UI falling out but then the footer got messed up.

If anyone is able to spot where I am going wrong then I’d be really grateful. Please see the two versions of the page. One page is where things are the way they are suppose to be and the other page is where the UI falls out.

Thanks
Ziad

2

I haven’t looked closely at your files, but you have two basic options:

  1. float the content div and apply clear: both to the footer
#content {
  float: left;
}

#footer {
  clear: both;
}
  1. simply apply overflow: hidden to the content div:
#content {
  overflow: hidden;
}

I would go for option 2. Hope that helps. :slight_smile:

3

Hi Ralph,

Tried option 2 but it didn’t seem to work, option 1 gave me better results but there still seems to be another issue. Will have a more closer look tonight and be back here if need be.

Thanks for your help.

4

Hi Ralph,

As I mentioned that your first option did fix the div falling out problem but it was causing the content area to not stretch horizontally so that was a major issue as well. However, I managed to get help from the template developer and he told me to a put a class clearfix on my UI element and that seems to have fixed the problem. I’ve seen this clearfix in many places but never really knew what it does (and still don’t understand it but hey I khow what its for and that’s good enough for me!).

Thanks

5

The clearfix method is a much more robust means of containing floats. Overflow: hidden is fine for simple layouts, but clearfix was the next option to mention. Essentially, it adds a tiny bit of unfloated code after the content, which forces the container to reach around the floated contents.