Блог

Я изучаю, как использовать divs для созданного мной макета, и, возможно, у меня неправильный подход, но то, что я пробовал до сих пор, не работает. Итак, я потратил последние 2 часа на поиск в Google и тестирование различных кодов, но, похоже, у меня не получается сделать это правильно.

Вот мой css:

 @charset "UTF-8";
/* CSS Document */

* {
margin: 0;
}
html{
height: 100%;
}
body {
background-color: #FFF;
background-image: url(images/bckgndPattern.gif);
background-repeat: repeat;
height:100%;
}
h2 {
color:#cccccc;
letter-spacing:4px;
}
#container_shadow {
background-image: url(images/containerShadow.png);
background-repeat: repeat-y;
height: 100%;
width: 920px;
margin-right: auto;
margin-left: auto;
}
#container {
height: 100%;
width: 900px;
margin-right: auto;
margin-left: auto;
background-color: #FFF;
}
#navbar_shadow_top {
background-color: #FFF;
height: 10px;
width: 888px;
}
#navbar {
background-color: #FFF;
height: 50px;
width: 888px;
}
#navbar_shadow_bot {
background-color: #FFF;
height: 10px;
width: 888px;
}
#container_inner {
height: 100%;
width: 888px;
margin-right: auto;
margin-left: auto;
background-color: #FFF;
border-right-width: medium;
border-left-width: medium;
border-top-style: none;
border-right-style: dashed;
border-bottom-style: none;
border-left-style: dashed;
border-top-color: #c8c8c8;
border-right-color: #c8c8c8;
border-bottom-color: #c8c8c8;
border-left-color: #c8c8c8;
}
#banner {
height: 140px;
width: 888px;
}
#content {
background-color: #FFF;
height:auto;
width: 888px;
}
#slide {
background-color: #FFF;
height: 200px;
width: 700px;
position: relative;
left: 132px;
top: 40px;
}
.main {
background-color:#FFF;
width: 590px;
min-height: 200px;
position:relative;
top: 280px;
left: 60px;
clear:both;
}
  

Моя проблема заключается в том, что я создаю div с классом main. Содержимое div не обтекает div.main. Слайд div, кажется, в порядке внутри содержимого div.

На данный момент я почти уверен, что мои разделы вложены в нужные места.

Это то, чего я пытаюсь достичь:

 --------------------------------------
-                                    -
-        -----------------------     -
-        -     SLIDE           -     -
-        -                     -     -
-        -----------------------     -
-                                    -
-    -------------------             -
-    -    MAIN         -             -
-    -                 -             -
-    -------------------             -
--------------------------------------
  

Вот ссылка на проект: Test

Когда вы перемещаете элемент, вы удаляете его из потока документов. Таким образом, родительский контейнер больше не содержит элементов. Параметры принудительного размещения родительского контейнера с плавающими дочерними элементами:

1) Присвоите контейнеру свойство overflow:

 #container { overflow: auto }
  

2) Также разместите контейнер:

 #container { float: left }
  

3) Добавьте третий дочерний элемент, который очищает предыдущие два элемента с плавающей точкой:

 .clearingElement { clear: both }