can't get div to flush at the top of the page - html

Question

I can't seem to get the right side/column of the page to flush at the top. I've included a picture to show you guys what I mean.
JSFiddle
http://jsfiddle.net/vDUE7/2/
Picture
http://oi57.tinypic.com/3128hew.jpg
Code
<div class="top-column">
<div class="image"><img src="http://www.hoax-slayer.com/images/blue-tiger- source.jpg" width="730" height="360"></div></div>
<div id="content">
<div class="middle-column">
<article class="in-column">
<img src="http://www.hoax-slayer.com/images/blue-tiger-source.jpg" width="150" height="100">
<b>Bengal Tiger</b></article>
</div>
<div id="side">
<li class="list">
<img src="http://www.hoax-slayer.com/images/blue-tiger-source.jpg" width="120" height="79" />
<p class="side-news">Bengal Tiger</p></a>
</li>
<li class="list">
<img src="http://www.hoax-slayer.com/images/blue-tiger-source.jpg" width="120" height="79" />
<p class="side-news">Bengal Tiger</p></a>
</li>
<li class="list">
<img src="http://www.hoax-slayer.com/images/blue-tiger-source.jpg" width="120" height="79" />
<p class="side-news">Bengal Tiger</p></a>
</li>
<li class="list">
<img src="http://www.hoax-slayer.com/images/blue-tiger-source.jpg" width="120" height="79" />
<p class="side-news">Bengal Tiger</p></a>
</li>
</div></div>
<div class="block">
</div>
</div>
CSS
img {
border: 0px;
display: block;
margin: 0 auto;
}
header#head {
padding-left: 20px;
position: relative;
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
border-bottom: 1px solid #000;
}
.image {
position: relative;
cursor: pointer;
float:left;
}
#container {
width: 1055px;
margin: 0 auto;
text-align: left;
background: #fff;
padding: 0;
margin-top:-26px;
}
#content {
overflow:hidden;
width:1053px;
height:100%;
border: 1px solid #dddddd;
}
#side{
width:312px;
height:100%;
float:left;
margin-top:-10px;
padding-left:10px;
background-color:#f3f3f3;
}
.block {
border-top: 1px solid #dddddd;
text-align: center;
background-color:#000;
width:1053px;
height:365px;
position:relative;
font-size:15px;
color: #fff;
}
.list{
width:300px;
border-bottom: 1px solid #dddddd;
display: inline-block;
margin-top:10px;
}
.middle-column {
width: 730px;
float: left;
border-right: 1px solid #dddddd;
}
article.in-column {
text-align: left;
padding: 15px;
border-bottom:1px solid #dddddd;
height:100%;
}
article.in-column img{
float:left;
margin-right:15px;
}
.list img{
float:left;
margin-right:15px;
border:1px solid #ddd;
margin-bottom:10px;
}
.top-column {
float: left;
width:730px;
height:360px;
border-right: 1px solid #000;
border-left: 1px solid #000;
border-bottom: 1px solid #000;
}

Answer 1

have removed the sidebar from the content div and placed it separately and instead of using float:left i've used display:inline-block. here's the updated fiddle,
http://jsfiddle.net/vDUE7/9/
hope this solves your problem.
HTML
<div class="top-column">
<div class="image"><img src="http://www.hoax-slayer.com/images/blue-tiger-source.jpg" width="730" height="360"></div></div>
<div id="side">
<li class="list">
<img src="http://www.hoax-slayer.com/images/blue-tiger-source.jpg" width="120" height="79" />
<p class="side-news">Bengal Tiger</p></a>
</li>
<li class="list">
<img src="http://www.hoax-slayer.com/images/blue-tiger-source.jpg" width="120" height="79" />
<p class="side-news">Bengal Tiger</p></a>
</li>
<li class="list">
<img src="http://www.hoax-slayer.com/images/blue-tiger-source.jpg" width="120" height="79" />
<p class="side-news">Bengal Tiger</p></a>
</li>
<li class="list">
<img src="http://www.hoax-slayer.com/images/blue-tiger-source.jpg" width="120" height="79" />
<p class="side-news">Bengal Tiger</p></a>
</li>
</div>
<div id="content">
<div class="middle-column">
<article class="in-column">
<img src="http://www.hoax-slayer.com/images/blue-tiger-source.jpg" width="150" height="100">
<b>Bengal Tiger</b></article>
</div>
</div>
<div class="block">
</div>
</div>
CSS
img {
border: 0px;
display: inline-block;
margin: 0 auto;
}
header#head {
padding-left: 20px;
position: relative;
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
border-bottom: 1px solid #000;
}
.image {
position: relative;
cursor: pointer;
float:left;
}
#container {
width: 1055px;
margin: 0 auto;
text-align: left;
background: #fff;
padding: 0;
margin-top:-26px;
}
#content {
overflow:hidden;
height:100%;
border: 1px solid #dddddd;
}
#side{
width:312px;
height:100%;
display:inline-block;
background-color:#f3f3f3;
}
.block {
border-top: 1px solid #dddddd;
text-align: center;
background-color:#000;
width:1053px;
height:365px;
position:relative;
font-size:15px;
color: #fff;
}
.list{
width:300px;
border-bottom: 1px solid #dddddd;
display: inline-block;
margin-top:10px;
}
.middle-column {
width: 730px;
float: left;
border-right: 1px solid #dddddd;
}
article.in-column {
text-align: left;
padding: 15px;
border-bottom:1px solid #dddddd;
height:100%;
}
article.in-column img{
float:left;
margin-right:15px;
}
.list img{
float:left;
margin-right:15px;
border:1px solid #ddd;
margin-bottom:10px;
}
.top-column {
float: left;
width:730px;
height:360px;
border-right: 1px solid #000;
border-left: 1px solid #000;
border-bottom: 1px solid #000;
}

Answer 2

Add a style to the side bar of
position:fixed;
top:0;
left:/*width of whatever width the stuff to the left of the side bar has*/
Hope I helped