Question

I have a footer on my page, where the content is placing correctly, under div#main (which includes div#left and div#right), but the background (the big blue thing) is placed way over div#main.

I have tried display:block and z-indexing the divs, to no avail.

Anyone have any idea what’s going on?

Code:

body {
  background:url(aaa-bg.jpg) repeat-x #e7e9e9;
  margin:0;
  padding:0;
  color:#383838;
  font:12pt verdana;
}

img {
  border:0;
}

a:link {
  color:#e29511;
  text-decoration:none;
}

a:hover {
  color:#e29511;
  text-decoration:underline;
}

a:visited {
  color:#808080;
}


/* header ------------------------------------------------------------------------------ */

#header {
  margin:10px auto 10px;
  width:800px;
  height:97px;
}

/* nav ------------------------------------------------------------------------------ */

#nav {
  width:800px;
  margin:0px auto 3px;
  height:30px;
}

#nav ul {
  margin:0 0px 0px 0;
  padding:0;
  list-style:none;
}

#nav ul li {
  width:140px;
  height:20px;
  padding:5px 0 5px 0;
  float:left;
  margin:0 10px 0 0;
  background:#cdcdcd;
  color:#000000;
  position:relative;
  z-index:99999;
  text-align:center;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  border-top:3px solid transparent;
  border-left:3px solid transparent;
  border-right:3px solid transparent;
}

#nav ul li:hover {
  cursor:pointer;
  border-top:3px solid #e29511;
  border-left:3px solid #e29511;
  border-right:3px solid #e29511;
}

#nav ul li.home {
  width:140px;
  height:20px;
  padding:5px 0 5px 0;
  float:left;
  margin:0 10px 0 0;
  background:#cdcdcd;
  color:#000000;
  position:relative;
  z-index:99999;
  text-align:center;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  border-top:3px solid transparent;
  border-left:3px solid transparent;
  border-right:3px solid transparent;
}

#nav ul li.home:hover {
  cursor:pointer;
  -moz-box-shadow: 5px 5px 2px #656565;
  -webkit-box-shadow: 5px 5px 2px #656565;
  box-shadow: 5px 5px 2px #656565;
}


#nav ul li ul {
  width:140px;
  margin:5px 0 0 -3px;
  float:left;
  -moz-box-shadow: 5px 5px 2px #656565;
  -webkit-box-shadow: 5px 5px 2px #656565;
  box-shadow: 5px 5px 2px #656565;
  background:url(aaa-navbg3.png) repeat-x #ffffff;
  border-bottom:3px solid #e29511;
  border-left:3px solid #e29511;
  border-right:3px solid #e29511;
}

#nav ul li ul li {
  width:140px;
  font-weight:normal;
  font-size:10pt;
  background:none;
  border-top:1px solid #808080;
  border-left:none;
  border-right:none;
  border-top-left-radius:0px;
  border-top-right-radius:0px;
}

#nav ul li ul li:hover {
  background:url(aaa-libg2.png) repeat-x;
  border-top:1px solid #808080;
  border-left:none;
  border-right:none;
}


/* toppane ------------------------------------------------------------------------------ */

#toppane {
  width:100%;
  height:210px;
  background:url(aaa-toppane3.jpg) repeat-x;
  padding:20px 0 20px;
  margin:0px 0 20px 0;
  position:relative;
  z-index:-1;
  border-top:1px solid #000000;
  border-bottom:1px solid #000000;
}

#toppane-inner {
  width:800px;
  height:210px;
  margin:0px auto;
}

/* slideshow ------------------------------------------------------------------------------ */

#window {
  clear:both; 
  width:800px; 
  height:210px; 
  overflow:hidden; 
  position:relative; 
  margin:0;
  padding:0;
}

#slideshow {
  width:1600px; 
  height:420px; 
  overflow:hidden; 
  position:relative;
  margin:0;
  padding:0;
}

#slideshow li { 
  width:800px; 
  height:210px; 
  float:left; 
  display:inline;
  margin:0;
  padding:0;
}

/* main ------------------------------------------------------------------------------ */

#main {
  width:800px;
  margin:5px auto;
  padding:0px;
}

#left {
  width:390px;
  margin:0 20px 0 0;
  padding:0px;
  float:left;
}

#right {
  width:390px;
  font-size:11pt;
  margin:0;
  padding:0px;
  float:right;
}

#right img {
  margin:0 0 5px 0;
}

#right a:link {
  text-decoration:none;
  color:#383838;
}

#right a:hover {
  text-decoration:none;
  color:#383838;
}

#right a:visited {
  text-decoration:none;
  color:#383838;
}

h2 {
  width:390px;
  font:14pt verdana;
  border-bottom:1px solid #383838;
  margin:0 0 5px 0;
  text-align:right;
}

.segment {
  margin:0 0 40px 0;
}

#footer {
  background:blue;
  width:800px;
  margin:30px auto;
  color:#ffffff;
}

#footer table {
  width:800px;
}

#footer tr {
  width:800px;
}

#footer td {
  width:200px;
}

Answer 1

Adding clear:left; to your footer solves this problem.

The issue you’re seeing is that #left and #right both extend outside of the #main div since they’re floating and nothing inside the #main div is clearing those floats.

The footer is then stacking vertically against the #main div which is not the same height as #left and #right.

One thing you can do to pull the main div down over the floated items is add something at the end of it to clear the floats. You can do this with CSS as follows:

#main:after{
  content:".";
  display:block;
  clear:both;
  visibility:hidden;
}