HTML Elements position correctly on Mac but not on PC

Question

I've used absolute positioning to place an element at the bottom of an image and it looks great on the Mac but is positioned too high on my PC, even when using the same browser on both computers. Would using percentages, pixels, em, or inches be best when absolutely positioning HTML elements? I'm relatively new to web programming, so any general advice is welcomed. Thanks!

HTML:

<div class = "article">

    <div class="title" onclick = "$('.aboutMe').fadeIn(500)">
            <p class = "slide"> ABOUT ME </p>
    </div> 

    <header>
        <h1> RAMON MIGUEL "RMI" FLORES </h1>
        <h2> Welcome to my personal website! </h2>
    </header>

    <img src = "tahoe2.jpg" alt = "Dorm Trip to Tahoe" title "Lake Tahoe" id = "tahoe">

    <div class = "subImages">
        <img src = "profile.jpeg" alt = "Profile Picture" id = "profile" onclick = "$('.aboutMe').fadeIn(500)"> 

        <div class="title" id = "socialTitle" onclick = "$('.socialMedia').fadeIn(500)">
            <p class = "slide"> SOCIAL MEDIA </p>
        </div> 
        <img src = "basketball.jpeg" alt = "Me Dunking" id = "basketball" onclick = "$('.socialMedia').fadeIn(500)">

        <div class="title" id = "contactTitle" onclick = "$('.contactMe').fadeIn(500)">
            <p class = "slide"> CONTACT ME </p>
        </div> 
        <img src = "contact.jpeg" alt = "Contact Me" id = "contact" onclick = "$('.contactMe').fadeIn(500)">
    </div>

    <footer>
        <p> &copy Ramon Flores 2012 </p>
    </footer>

</div>

CSS:

    body {
        background-color: #EDEDF3;
    }

    .article {
        border: 1px solid rgba(255, 204, 204, 0.25);
        background-color: #FFF;
        width: 80%;
        margin: 20px auto;
        padding: 0 20px;
        -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        border-radius: 25px;
        -moz-border-radius: 25px;
    }

    h1 {
        font-size: 65px;
        font-family: 'Quicksand', sans-serif;
        font-weight: 100;
        text-align: center;
        color: #333;
        text-shadow: -2px 2px 5px rgba(0, 0, 0, 0.3);
        letter-spacing: 0;
        margin-bottom: 0;
    }

    h2 {
        font-size: 20px;
        font-family: 'Raleway', 'Quicksand', sans-serif;
        font-weight: lighter;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
        text-align: center;
        color: black;
        letter-spacing: 0;
    }

    #tahoe {
        width: 98.7%;
    }

    .article img {
        border: 5px solid #EDEDF3;
    }

    #profile, #basketball, #contact {
        width: 32%;
        height: 4.7in;
        border-radius: 25px;
        -moz-border-radius: 15px;
    }

    .subImages {
        display: inline;
    }

    footer {
        font-size: 15px;
        color: #B28F8F;
        text-align: center;
        font-family: 'Raleway', sans-serif;
    }

    footer p:hover { 
        color: black; 
        -webkit-transition: all 0.5s ease-in;
        -moz-transition: all 0.5s ease-in;
        -o-transition: all 0.5s ease-in;
        transition: all 0.5s ease-in;   
    }

    .title {
        background-color: #66CCFF;
        width: 26%; 
        color: white;
        font-family: 'Quicksand', sans-serif;
        text-align: center;
        font-size: 30px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        -moz-border-bottom-right-radius: 20px;
        -moz-border-bottom-left-radius: 20px;
        text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
        position: absolute;
        top: 1127px;
    }

    #socialTitle { left: 36.9%; }

    #contactTitle { left: 63.3%; }

Sorry if there's a lot of code. I'm fairly new and I'm not sure where the problem may be so I just posted a lot of it. I want to place the ".title" elements at the bottom of each of the 3 images in the ".subImages" class. This works fine on all of the browsers on the Mac but the ".title" elements are placed too high on all of the browsers on the PC. Thank you so much for your help!

Answer 1

It doesn't matter whether you use pixels or inches: if you want an element to be at the bottom, use bottom: 0;

See this fiddle, where the image is inside a container div. The title is positioned over the image, at the bottom of the container. I've used a color and semi-transparency, so you can see the title is actually positioned over the 'image'.

http://jsfiddle.net/GolezTrol/wp3Fd/