Content taking over the other content. NEED HELP!

Hi here is the sample [url]http://www.kojakfiles.com/about[/url] . It doesnt get inside the appropriate place.. It is taking over the other contents..

html code

[code]<?php /* Template Name: Rock */ ?>

<?php get_header(); ?>

<link rel=”stylesheet” type=”text/css” media=”screen, print, projection” href=”http://kojakfiles.com/wp-content/themes/TweetSheep/rock.css”></link>

<div id=”rock”>
<div id=”layer1″></div>
<div id=”layer1copy”></div>
<div id=”layer1copy2″></div>
<div id=”dsadasdasddsadasdasddsadasdasddsadasdasddsadasdasddsadasdasd”>
<p>tae</p>
</div>
</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>
[/code]

CSS code

[code]#dsadasdasddsadasdasddsadasdasddsadasdasddsadasdasddsadasdasd p {
font: bold 13px/16px Arial;
margin: 0px;
color: #515151;
text-align: left;
}

#dsadasdasddsadasdasddsadasdasddsadasdasddsadasdasddsadasdasd {
visibility: visible;
position: absolute;
left: 22px;
top: 440px;
z-index: 1;
width: 428px;
}

#layer1copy2 {
background: url(rockmedia/layer1copy2.gif) no-repeat;
visibility: visible;
position: absolute;
left: 0px;
top: 137px;
z-index: 3;
width: 321px;
height: 292px;
}

#layer1copy {
background: url(rockmedia/layer1copy.gif) no-repeat;
visibility: visible;
position: absolute;
left: 107px;
top: 119px;
z-index: 2;
width: 361px;
height: 292px;
}

#layer1 {
background: url(rockmedia/layer1.gif) no-repeat;
visibility: visible;
position: absolute;
left: 22px;
top: 43px;
z-index: 1;
width: 361px;
height: 292px;
}

#rock {
margin: 0px auto 0px auto;
width: 476px;

}

html, body {
padding: 0px;
margin: 0px;
background-color: #FFFFFF;
}

[/code]

What seems the problem..

please advice..

Also in #CSS _↴