Ok so here is my question i have a website and in the middle i have a section and a aside. every thing else on the page is 100% but the section and aside i want to equal 80% and me aligned next to each other in the middle. but instead i get this.
IMAGE: https://twitter.com/iamalecgrogan/status/392454057345810432/photo/1
before you start saying stuff i have tried every thing doing table-cell and table verticaly align and in-line block elemets creating a div for them to go into. but nothing is working please help. here is my code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Home | ProvideWebDesign
</title>
<link rel="stylesheet" type="text/css" href="styles/layout.css">
<link rel="stylesheet" type="text/css" href="styles/style.css">
</head>
<body>
<div id="wrapper">
<header id="header">
<div id="header_right">
</div>
<div id="header_left">
</div>
</header>
<nav id="nav">
</nav>
<section id="section">
<article id="section_article">
</article>
<article id="section_article2">
</article>
</section>
<aside id="aside">
<article id="aside_article">
</article>
<article id="aside_article2">
</article>
<article id="aside_article3">
</article>
</aside>
<footer id="footer">
<div id="footer_right">
</div>
<div id="footer_left">
</div>
</footer>
</div>
</body>
</html>
CSS--------------------
*
{
margin: 0px;
padding: 0px;
}
#wrapper
{
width: 100%;
height: 875px;
display: table;
}
#header
{
width: 100%;
height: 75px;
display: block;
}
#header_right
{
width: 50%;
height: 75px;
float: left;
display: block;
}
#header_left
{
width: 50%;
height: 75px;
float: left;
display: block;
}
#nav
{
width: 100%;
height: 50px;
display: block;
}
#section
{
width: 60%;
height: 600px;
float: left;
display: table-cell;
}
#aside
{
width: 20%;
height: 600px;
float: left;
display: table-cell;
}
#footer
{
width: 100%;
height: 150px;
display: block;
clear: both;
}
#footer_right
{
width: 50%;
height: 150px;
float: left;
display; block;
}
#footer_left
{
width: 50%;
height: 150px;
float: left;
display: block;
}