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;
}
html css position
Edit
Report