My goal is to get the article in the middle of the leftnav and rightnav. My current syntax is allowing for the leftnav and aside to "smash" into one another. I've added the margin-left and padding left to my article and that does not seem to work. How would I get the article in the center of the page without "smashing" into the leftnav? Thanks everyone.
CSS
/* CSS Document */
body{
background-color:#9F6;
}
section{
width:960px;
/*padding:15px;*/
}
header{
height:150px;
outline:#000 dotted;
}
nav{
position:relative;
outline:#000 dotted;
}
nav ul{
padding:15px;
}
nav ul li{
/* Moves the nav in a horizontal fashion */
display:inline;
}
nav ul li a{
list-style-type:none;
text-decoration:none;
text-transform:capitalize;
padding:15px;
}
nav ul li a:hover{
background-color:#F00;
color:#0FF;
}
#leftnav{
float:left;
width:160px;
outline:#000 dotted:
/*margin-right:15px; */
/*padding:15px;*/
/*padding-right:2cm;*/
}
#rightnav{
float:right;
width:160px;
outline:#000 dotted:
}
aside, article{
min-height: 550px;
/*background-color: #F96;*/
outline:#000 dotted;
/*padding: 1px;*/
}
article{
width:750px;
/*margin-left:15px;*/
/*padding-left:65px;*/
}
footer{
width:960px;
outline:#000 dotted;
margin-top:15px;
text-align:center;
}
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="another-css.css">
<title>Another Test</title>
</head>
<body>
<section>
<header>
<h3>This Is The Header</h3>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Cars</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
<aside id="leftnav">
aside left
</aside>
<aside id="rightnav">
aside right
</aside>
<article>
article
</article>
<footer>
Copyright 2013
</footer>
</section>
</body>
</html>