Problèmes de blocs-css

Bonjour,

J'ai un petit problème au niveau de mes blocs lorsque je veux mettre le sous-titre en-dessous de mes onglets, il se met toujours au-dessus de ceux-ci.
Je vous donne mon code html:
<div id="options">
<ul id="onglets">
<li><a href="description.html"> Description de l'objet</a></li>
<li><a href="ajouts.html"> Options ajoutés à l'objet</a></li>
<li><a href="telechargement.html"> Téléchargement</a></li>
</ul>
</div>
<div id="soustitre">
Description de l'objet
</div>
<div id="image">
<img src="http://static.dezeen.com/uploads/2008/05/biglocal-river-03-gr.jpg">
</div>
et mon code css:
#onglets
{
position: absolute;
border: 1 px solid transparent;
padding: 0;
font-style: bold;
font-size: 30px;
font-family: Batang, arial, serif;
list-style-type: none;
padding-bottom: 50px;
border-bottom:1 px solid #9EA0A1;
margin-left:15%;
}
#onglets li
{
float: left;
height: 50px;
background-color: #F4F9FD;
margin: 2px 2px 0 2px;
margin: 1px 2px 0 2px;
border: 1px solid #9EA0A1;
}
#onglets a
{
display: block;
color: #666;
text-decoration: none;
padding: 4px;
}
#onglets a:hover
{
background:#fff;
}
#soustitre
{
text-align: center;
position: relative;
margin-top: 200 px;
color: #21232B;
}

C'est assez long, je m'en excuse... Mais merci de votre aide!