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
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.
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%.
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.
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 }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With