Looking for advice on how to effectively use dividers positioned at the center of a page? Specifically, I am interested in having two dividers: one measuring 200px wide and another measuring 500px wide, both with a 5px top margin. These dividers should be placed in the center of the page as depicted in the image below.
<section>
<article>
<p>texttext text </p>
<div id="divider">
<div id="divider-short"> </div>
<div id="divider-long"> </div>
</div>
</article>
</section>
#divider{
float:right;
margin-right:35%
direction:rtl;
}
#divider-short{
width:150px;
border:2px solid gray;
margin-top:30px;
clear:both;
}
#divider-long{
margin-top:10px;
width:300px;
border:2px solid gray;
clear:both;
}