JSFiddle - React, Tailwind, and code Playground

http://stackoverflow.com/questions/6929310/why-is-my-aside-at-the-bottom-of-this-page

by tw16

HTML

<!DOCTYPE html>

<HTML>
<HEAD>
<TITLE>Photoblog</TITLE>

<link rel="stylesheet" href="css/style.css" type="text/css"/>  
</HEAD>
<BODY>

<div id="container">  

<header>
    <H1>Photoblog</H1>
</header>

<nav>
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
</nav>
    
    <aside>
    <h2>About Me</h2>
    <p>Hello here is some placeholder text.Hello here is some placeholder text.Hello here is some placeholder text.
    Hello here is some placeholder text.Hello here is some placeholder text.Hello here is some placeholder text.
    Hello here is some placeholder text.Hello here is some placeholder text.</p>
    </aside>

    <article>
    <h2>Welcome:</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et eros justo, quis consectetur arcu. 
    Etiam vel orci massa, vel vestibulum ante. Nam posuere luctus iaculis. In id augue augue. 
    Integer vel massa purus, sit amet tincidunt sapien. Integer sit amet adipiscing risus. 
    Praesent rhoncus mauris mattis justo mattis eget egestas augue interdum. Curabitur tempus accumsan lacus 
    id accumsan. Nulla fermentum, purus a tempus tristique, diam nibh porttitor felis, et aliquet nunc nisl ac 
    turpis. </p>    
    </article>

    <article>
    <h2>First Impressions</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et eros justo, quis consectetur arcu. 
    Etiam vel orci massa, vel vestibulum ante. Nam posuere luctus iaculis. In id augue augue. 
    Integer vel massa purus, sit amet tincidunt sapien. Integer sit amet adipiscing risus. 
    Praesent rhoncus mauris mattis justo mattis eget egestas augue interdum. Curabitur tempus accumsan lacus 
    id accumsan. Nulla fermentum, purus a tempus tristique, diam nibh porttitor felis, et aliquet nunc nisl ac 
    turpis. </p>    


    </article>

    <article>
    <h2>Bro</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit....

CSS

body {
background-color: #F2E9E1;
color : #111111;
font-family : "Arial", "helvetica", sans-serif;
font-size : 11pt;
}

header h1 {
background-color: black;
padding:0px;
color: #ffffff;
display:block;
height: 80px;
width: 960px;
text-align : center;
line-height:80px ;
font-family : "Georgia", Serif;
}

nav ul {
list-style : none;
width:960px;
padding : 0;
text-align : center;
}

nav ul li {
color : #111111;
display : block;
}

nav {
display : block;
}

nav a {
color : #111111;
}

nav ul li {
display : inline;
}

article {
    background-color: #CBE86B;
    float: left;
    padding: 0 20px 40px;
    width: 560px;
}

article img {
height : 400px;
width : 600px;
}

aside {
    background-color: #CCCCCC;
    float: right;
    padding-left: 20px;
    width: 280px;
}

#container {
width : 900px;
margin : 0 auto;
}

footer {
margin-top: 20px;
float : left;
text-align: left;
width : 600px;
}