If I have a link, which when pressed makes a <DIV> appear, how can I get this <DIV> to appear directly under the link (that is pressed to make it appear) and for it to start at the same left-sided position where the link starts? Also, I need the content that lies underneath the link to not shift when the <DIV> appears.

I have the following CSS and HTML, but when I press the link the <DIV> appears to the right of the Link, but I want it to appear underneath it and start from the left.

HTML Code:
.offerdetails {
	white-space: normal;
	width: 306px;
	text-align: left;
	font-size: 10px;
	background: #fff;
	color: #000;
	border: #c00 1px solid;
	position: absolute;
	z-index: 100;
	padding: 5px;
<div class="offercell">
	<a href="" Class="OfferDetailLink" onclick="showInfo('detail2');return false;" title="view offer info">50 TEXT MESSAGES per month</a>
		<div class="offerdetails" style="display:none" id="detail2">
			<div class="close">
				<a href="#" onclick="closeDetail('detail2')" title="Hide information">X</a>
			50 TEXT MESSAGES - For the life of your contract you can send 50 inclusive text messages a month to any network, saving you 5 per month.
I haven't included the Javascript that sets the offerdetails <DIV> style's display to block or none when the link is clicked.

I hope this is suficient enough information for you all