Question

I am learning how to use divs for a layout I made and I may have the wrong approach, but what I’ve tried so far hasn’t been working. So I have spent the last 2 hours googling and testing out various codes, but I cannot seem to get it right.

Here is my 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;
}

My problem is when I create a div with the class main. The content div does not wrap around the div.main. The slide div seems to be okay within the content div.

As of now, I am pretty sure my divs are nested in the right places.

This is what I am trying to achieve:

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

Here is a link to the project: Test

Answer 1

When you float an element, you take it out of the document flow. As such, the parent container no longer contains the elements. Options to force the parent container to contain the floated children:

1) Give the container an overflow property:

#container { overflow: auto }

2) Float the container as well:

#container { float: left }

3) Add a 3rd child element that clears the previous two floats:

.clearingElement { clear: both }