Html+Css Issues

Html+Css Issues

So i was making a new layout for my webiste when i got close to finshing
it when i ran into a issue the issue is that where my content section is i
want two bars going down at the side now i got one of the bars working by
using margin but for one of my bars i carnt use the margin as i want
content so go at the side of it
This is my Code on jsfiddle http://jsfiddle.net/BsGVd/
Html:
<div id="Head">
<p>&nbsp;</p>
<p>
<img src="Image/Logo.png" width="237" height="41" />
</p>
</div>
<div id="MainDiv">
<div id="Line">
<p></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
Css:
@charset"utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}
body {
background-image: url(http://theirondoor.x10.bz/V2/Image/Background.png);
padding-top: 0px;
margin-top: 0px;
margin:0px;
}
#Line {
background-image:url(http://theirondoor.x10.bz/V2/Image/Line.png);
width:7px;
height:500px;
height:auto;
}
#Line1 {
background-image:url(http://theirondoor.x10.bz/V2/Image/Line1.png);
width:7px;
height:auto;
float:left;
margin:20px;
}
#MainDiv {
width:auto;
background-image:url(http://theirondoor.x10.bz/V2/Image/Main.png);
width:78%;
margin-left:60px;
margin-top:2px;
height:auto;
}
#Head {
background-image:url(http://theirondoor.x10.bz/V2/Image/Head.png);
height:72px;
}
and this is what i want it to look like