I've set my vertical navigation to be 10% width and my content to be 90%, but for some reason, I can't get them to align properly next to each other. I've experimented with float: left and display: inline-block, but so far nothing has worked. Any assistance would be greatly appreciated.
@import url(http://fonts.googleapis.com/css?family=Play);
/* CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/* --------- */
.mainHeader {
background: rgb(255,50,50);
padding: 20px;
}
.mainHeader h1 {
font-family: "Play";
color: rgb(255,255,255);
font-size: 24px;
}
.mainNavigation {
padding: 12px;
width: 10%;
height: 900px;
font-family: "Play";
font-size: 18px;
background: rgb(255,50,50);
float: left;
}
.mainNavigation ul {
padding: 0;
margin: 0;
list-style-type: none;
list-style: none;
}
.mainNavigation ul li {
width: 100%;
padding: 2px;
}
.mainNavigation ul li a {
text-decoration: none;
color: rgb(255,255,255);
padding: 12px;
width: 100%;
-webkit-box-sizing : border-box;
-moz-box-sizing : border-box;
box-sizing : border-box;
display: inline-block;
border: 1px solid rgb(255,100,100);
}
.mainNavigation ul li a:hover {
background: rgb(255,255,255);
color: rgb(0,0,0);
}
.mainContent {
padding: 8px;
display: inline-block;
width: 90%;
margin: 0 auto;
-webkit-box-sizing : border-box;
-moz-box-sizing : border-box;
box-sizing : border-box;
}
.article {
background: rgb(222,222,222);
padding: 8px;
margin: 0 auto;
border: 1px solid rgba(222,222,222,0.5);
width: 90%;
font-family: "Play";
}<!doctype HTML>
<html>
<head>
<link href="css/reset.css" type="text/css" rel="stylesheet"/>
<link href="css/base.css" type="text/css" rel="stylesheet"/>
<title>temp</title>
</head>
<body>
<div class="mainHeader">
<h1>Jackatron</h1>
</div>
<div class="mainNavigation">
<ul class="clearfix">
<li><a href="index.php">Home</a></li>
<li><a href="index.php">Profile</a></li>
</ul>
</div>
<div class="mainContent">
<div class="article">
<h1>Hello</h1>
</div>
</div>
</body>
</html>