I im going through a tutorial on html 5 and the 960grid system i have this code
The problem im having is the aside section is displaying halfway down on the right hand side so it starts level with the 2nd article eliment when i want it to start at the top.
TIA
Code:
<!DOCTYPE HTML>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<!-- www.phpied.com/conditional-comments-block-downloads/ -->
<!--[if IE]><![endif]-->
<script> document.documentElement.className = 'js'; </script>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/960_24_col.css" />
<link rel="stylesheet" href="css/text.css" />
<link rel="stylesheet" href="css/style.css" />
<!-- For the less-enabled mobile browsers like Opera Mini -->
<link rel="stylesheet" media="handheld" href="css/handheld.css?v=1">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="js/selectivizr.js"></script>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<style>
header, section, article, footer, nav, aside { display: block; }
#content { background: red; overflow: hidden; }
#banner { background: green; clear: both; }
#siteInfo { clear: both; }
article { background: blue;}
aside {background:white;}
</style>
</head>
<body>
<header class="container_24">
<div id="logo" class="grid_9 push_2">
<h1> Logo </h1>
</div>
<nav class="grid_9 push_2">
<ul>
<li>
<a href="#" class="selected">HOME</a>
</li>
<li>
<a href="#">ABOUT</a>
</li>
<li>
<a href="#">PORTFOLIO</a>
</li>
<li>
<a href="#">BLOG</a>
</li>
<li>
<a href="#">CONTACT</a>
</li>
</ul>
</nav>
</header>
<div id="content-outer">
<div id="content-wrap" class="container_24">
<div id="content">
<h2>Welcome to Our site</h2>
<article class="grid_14 push_2">
<h3> article title </h3>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</article>
<article class="grid_14 push_2 ">
<h3> article title </h3>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</article>
<aside class="grid_5 push_3" style >
Twitter form
</aside>
</div>
</div>
</div>
<div id="footer-wrap" class="container_24">
<footer class="grid_14 push_8">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</footer>
</div>
</body>
</html>The problem im having is the aside section is displaying halfway down on the right hand side so it starts level with the 2nd article eliment when i want it to start at the top.
TIA
