div elements overlapping instead of aligning vertically

Question

I want a div element's top margin to match with the bottom of another, how can I do this?

Can I do it without using tables?

<div style="text-align:left; position:absolute; left:12%;">
<input type="checkbox" name="acceptance" value="I have read and agree with the terms and conditions.">
<label style="text-align:left; color:yellowgreen ;font-size:27px ;font-family:cursive;font-style:italic;">I have read and agree with the terms and conditions</label>
</div>

<div style="text-align:center; width = 100%;">
<a href="i-hm-p.html";><img border="0"  src="images/imappyenter.png" width="100px"></a>
</div>

Please ignore my bad formatting, I'm editing someone else's code as well as learning CSS.

What I want to do is I want to place a checkbox at 12% of total width in a line, and a short explanation for it immediately after. I've placed both in one div element.

In another div element, I've placed a link wrapped in an image, which I want to align centrally while not being in the same line as the checkbox and its visible explanation.

How can I do this?

Answer 1

Just change position:absolute to position:relative