div перекрывается / неуместен

Question

У меня есть нижний колонтитул на моей странице , где содержимое размещается правильно, под div # main (который включает в себя div # left и div # right), но фон (большой синий) расположен над div # main.

Я пробовал показывать: блокировать и индексировать div, но безрезультатно.

Кто-нибудь знает, что происходит?

Код:

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

Добавление clear:left; в нижний колонтитул решает эту проблему.

Проблема, которую вы видите, заключается в том, что #left и #right оба выходят за пределы #main div, так как они плаваютничто внутри #main div не очищает эти поплавки.

Затем нижний колонтитул укладывается вертикально против #main div, высота которого не равна #left и #right.

Одна вещь, которую вы можете сделать, чтобы вытянуть основной элемент над всплывающими объектами, это добавить что-то в конце, чтобы очистить поплавки.Вы можете сделать это с помощью CSS следующим образом:

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

Answer 2

То, что вам нужно использовать, это то, что называется «четкое исправление».Вещи пересекаются, потому что браузер не знает, когда, так сказать, остановить «плавающие» вещи.

Вы можете либо:

a) Добавить после своих основных элементов div следующее

<div style="clear: both;">&nbsp;</div>

b) Добавьте стиль clear: both к самому нижнему колонтитулу.