IE 11 positioning issue versus Firefox

Question

I have been the following code that is not properly positioning itself when reviewed on Firefox against IE 11:

<div style="position: absolute;">    
<div style="position: relative; top: 5px; left: 30px;">Union Affiliation:</div>
<div style="position: relative; top: 50px; left: 30px;">Biography:</div>
<div style="position: relative; top: 150px; left: 30px;">Past Works:</div>
<div style="position: relative; top: 209px; left: 30px;">Primary Work Area:</div>
<div style="position: relative; top: 225px; left: 30px;">Miles willing to travel for work:</div>
</div>

I have tried a handful of adjustments, but nothing is lining it up right. From what I can tell with IE 11 we should be able to avoid having to detect that internet explorer is in use. If so, how can I get these elements to be consistently laid out across the browsers?

---

Here are screenshots to see the variation...

First FF:

Second IE:

Answer 1

I can tell you why you're not getting the results you want, but with the question as it is now, I can't tell you how to get the results you do want.

position: relative combined with left and top means that you're offsetting the element from where it would be in the browser's default layout. So you're still completely subject to how the browser lays the elements out relative to other elements, you're just moving them a bit based on that location.

If you want the labels to be aligned in some way with the inputs on the right, you need to put them both in some container (a div, for instance) and if necessary adjust them within that container. (To do that, you probably have to make the container position: relative without any left or top, so that it's the offset parent for its children.) By putting both within the same container, you ensure they're working from a similar basic position (the container).