How to vertically align two <div> tags perfectly for each resolution?

Question

I am working on the login form for the next time when we update Blackboard, as it will be using a new theme and our current page is not compatible with it. I am not too design savvy or an expert at all at HTML/CSS, I merely know how to use the inspector to do a little investigating and make changes if something is broken. What I'm also not specifically an expert at is knowing how to implement all the specific position details and what not.

So far I've almost got my page just the way I want it but different screen resolutions throw off the rendering. 1920x1200 loads the two boxes in the middle perfectly, but 1440x900 off centers them to the right. I basically want the two boxes(the ones that are outlined)to always center and be right next to each other like they are no matter what screen sizes/resolution.

You can go to https://com-bb-dev.com.edu to see what I have right now and to use the inspector to check out the CSS. Here is what I've tried so far: div.loginBody is on the left and #loginOptions is on the right on the site.

div.loginBody 
{
background:url("images/Bb_learn_small.png") no-repeat scroll 65px 21px rgba(255, 255, 255, 0.74);
position:relative;
margin-left: 22%;
margin-top: 2%;
padding-top: 175px;
width: 529px;
border-style: solid;
border-width: 1px;
}

and

#loginOptions 
{
background: rgba(255, 255, 255, 0.72);
position: absolute;
float: right;
margin-left: 101%;
top: -1px;
width: 529px;
height: 392px;
border-style: solid;
border-width: 1px;
}

Thanks

Answer 1

I would move some of your CSS from .loginBody to #loginBox . At the same time I would get rid of a lot of that positioning and margin stuff you got going on.

Here is a simplistic jsFiddle using your dimensions: http://jsfiddle.net/vWVD8/ This jsFiddle uses smaller dimensions so you can see how everything is getting centered more clearly as the window for the fiddle is kind of small: http://jsfiddle.net/vWVD8/1/

margin: 0 auto; centers everything. In order for it to work a width must be specified. Other than that we float our two DIVs to the left so they line up.

HTML

<div class="loginBody">
    <div id="loginBox">
        Login Box DIV
    </div>
    <div id="loginOptions">
        Login Options DIV
    </div>
</div>

CSS

.loginBody {
    margin: 0 auto;
    width: 1074px;  /* = div width + margins + borders + padding + etc. */
}
#loginBox,
#loginOptions {
    border: 1px solid #000000;
    float: left;
    height: 329px;
    width: 529px;
}
#loginOptions {
    margin-left: 10px;
}