Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

I need help getting my content div container to wrap around two inside divs!

Tags:

html

css

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

like image 1000
KenjiOne Avatar asked May 02 '11 04:05

KenjiOne


People also ask

How do I make a div container side by side?

Use CSS property to set the height and width of div and use display property to place div in side-by-side format. float:left; This property is used for those elements(div) that will float on left side. float:right; This property is used for those elements(div) that will float on right side.

How do I fit a div into a container?

Method 2: We can make the display attribute of the child container to table-row and display attribute of parent container to table, that will take all the height available from the parent div element. To cover all the width, we can make the width of parent div to 100%.

How do I keep my div one below another?

If you want the two div s to be displayed one above the other, the simplest answer is to remove the float: left; from the css declaration, as this causes them to collapse to the size of their contents (or the css defined size), and, well float up against each other.


1 Answers

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 }
like image 108
DA. Avatar answered Nov 15 '22 04:11

DA.