How do you position CSS elements directly under each other?

css, html, position

Solution

Create a container div. This holds everything you want, whether you want to stack them vertically or horizontally. So roughly it would look like this:

<div id="container">
    <div class="header">
    </div>

    <div class="navigation">
    </div>

    <div class="left-sidebar">
    </div>

    <div class="content">
    </div>
</div>

And your CSS would be

#container {
width:960px;
}
.header, .navigation {
width: 100%;
float:left;
height: 80px;
}
.sidebar {
width: 200px;
float:left;
min-height: 500px;
}
.content {
width: 760px;
float: left;
min-height: 500px;
}

Problem

I know there is probably a solved question like this, but I've searched and I couldn't a solution. So, look. I have the basics for a website. A header, featured content, main content, and footer. I want the main content to fall under the featured content, but right now it's behind it. How can I make it go right underneath it? HTML: ``` <html> <head> <link href="style.css" type="text/css" rel="stylesheet"> </head> <body> <div class="navigation"></div> <div class="content-featured"></div> </body> ``` CSS: ``` html, body { margin: 0; padding: 0; } .navigation { float: left; padding: 15px 0; min-width: 100%; opacity: .48; /* layer alpha */ background-color: #1f1f1f; /* layer fill content */ height: 20px; } .content-featured { height: 384px; background-image: -moz-linear-gradient(bottom left, #1db568 -25%, #1db568 17.74%, #257755 125%); /* gradient overlay */ background-image: -o-linear-gradient(bottom left, #1db568 -25%, #1db568 17.74%, #257755 125%); /* gradient overlay */ background-image: -webkit-linear-gradient(bottom left, #1db568 -25%, #1db568 17.74%, #257755 125%); /* gradient overlay */ background-image: linear-gradient(bottom left, #1db568 -25%, #1db568 17.74%, #257755 125%); /* gradient overlay */ } .content-main { height: 308px; } ```

Original source