Search code examples
csshtmloverlapping

Footer content overlapping wrapper div

I have a footer content that is overlapping the wrapper div in my css and html, when I changed height to auto it didnt work. below is an example of the page I'm working on.

Wrapper CSS

#wrapper {
width: 1030px;
height: 600px;
margin: 20px auto auto auto;
padding: 0;
background: url(wrapper.png);
}

Footer CSS

.footer{
width: 1000px;
padding: 60px 0 0 30px;
height: auto;
float: right;
clear: both;
background: url(footer_bg.gif) no-repeat top right;
text-align: center;

}

Example

Solution

  • You need to clear your floats in the .content_left and content_right columns and remove the height associated with your #wrapper:

    http://jsfiddle.net/L6acE/3/

    There's a few different methods for clearing floats. I went with a real simple method of just adding a <div style="clear:both;"> after both columns as discussed here:

    http://css-tricks.com/the-how-and-why-of-clearing-floats/

    But I'd generally use a clearfix method discussed here:

    http://nicolasgallagher.com/micro-clearfix-hack/

    I also added in some word-wrap:break-word CSS for your left column to wrap all your dummy content.