What's the best way to ensure two <div> tags are perfectly vertically aligned across all screen resolutions?

Currently, I am in the process of revamping the login form for the upcoming Blackboard update. The new theme being introduced is not compatible with our current page layout, so adjustments need to be made. While I am not an expert in design or HTML/CSS, I can navigate through the inspector to troubleshoot and make minor modifications. One thing I find challenging is fine-tuning the position details within the layout.

Although I have almost achieved the desired look for the page, different screen resolutions pose a challenge. For instance, at 1920x1200, the two boxes align perfectly in the center. However, at 1440x900 resolution, they appear off-center to the right. My goal is to ensure that these outlined boxes always remain centered next to each other regardless of the screen size/resolution.

You can visit to view the current state of the page and inspect the CSS properties. Presently, div.loginBody is positioned on the left, while #loginOptions is placed on the right side of the website.

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;
}

Thank you.

javascripthtmlcss

Answer №1

To improve your CSS, consider transferring some styles from .loginBody to #loginBox and removing excessive positioning and margin properties.

Check out this simplified jsFiddle with your dimensions: http://jsfiddle.net/vWVD8/ Another version of the jsFiddle with smaller dimensions for clearer centering: http://jsfiddle.net/vWVD8/1/

The key to centering elements is using margin: 0 auto; along with specifying a width. Additionally, floating the two DIVs to the left will align them properly.

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;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

javascript for transforming date format

My textfield is set to be a date field with a jQuery datepicker(). The dateFormat() is dd-mm-yy, which works perfectly. However, MySQL requires dates to be in yyyy-mm-dd format. I am wondering if I can convert the date format using PHP or JavaScript before ...

phpjavascriptjquery

Unable to apply border radius to the div containing the video

Currently, I am attempting to create a video with rounded corners by wrapping the <video> tag in a div element with rounded corners. This method works perfectly in Chrome and Firefox, but unfortunately does not work in Safari. It seems like this ma ...

csshtmlhtml5-video

Are THREE.js CSS2D Text Labels able to be detected and distinguished by RayCasting?

Currently, I am in the process of creating a diagramming tool using THREE.js. To add text labels to my diagrams, I have been utilizing the CSS2D feature provided by THREE.js, which allows for text that is both rotatable and MathJax-friendly. For regular m ...

cssthree.jsraycasting

Input specific ng-if conditions

I'm a bit confused about the conditions for my ng-if and could use some assistance. I have a form on my page that is rendered using ng-repeat and a couple of custom filters. You can check out this plunker. The issue I'm facing is that I need to p ...

javascriptangularjs

Retrieve the initial element from a JSON object to identify errors, without being dependent on its specific key name

Utilizing AngularJS, my JSON call can result in various errors. Currently, I am handling it like this: $scope.errors = object.data.form.ERRORS or $scope.errors = object.data.system.ERRORS However, in the future, 'form' or 'system' ...

javascriptangularjs

Steps to incorporate a nested table in HTML with merged columns

A number of university groups have utilized my HTML table applications. Each university may have various groups, with each group currently consisting of only one student. The HTML code I am working with includes AngularJS as shown below: <table&g ...

htmlcssangularjshtml-table

Retrieving information from controller to HTML page in AngularJS

Check out my code on Plunkr: http://plnkr.co/edit/8sBafktFzFa8fCLLJgMF This is the JavaScript file: angular.module('ui.bootstrap.demo', ['ui.bootstrap']); angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl&ap ...

javascriptjqueryangularjsangularjs-directive

Is there a way to capture real-time console output in an ExpressJS application while a script is running?

I'm facing a challenge in integrating the output of a bash script into an ExpressJS application to then send the data to a client. To address this, I have developed a simplified version of my actual script for testing purposes. My goal is to capture a ...

javascriptnode.jsbashexpressshelljs

Unable to locate the hover animation feature on the product box

Attempting to recreate the image box from this page on my blog where the blog posts are displayed. I believed all that was required was a thumbnail arrow, but it is not displaying correctly with the current CSS file. <style> .thumbnail-arrow { wid ...

htmlcsswordpress

jquery: selecting a specific child div element

Is it possible to target a child div of the current element in jQuery, apply toggle functionality to it, and simultaneously remove the link click effect? Below is the HTML code: <a href="#" class="title">Link</a> <div class="data"> c ...

jqueryhtml

Issue with Closing Bootstrap 4 Modal on Hide Operation

I had successfully implemented this feature in bootstrap 3, but unfortunately, I have not been able to replicate the same in bootstrap 4 (beta). The modal for the sign-in form is structured as follows: <div class="modal fade" id="signInModal" tabindex ...

jqueryhtmltwitter-bootstrapbootstrap-modalbootstrap-4

Using identical CSS styles across various classes in material UI

Three classes have been defined with identical CSS properties. const useStyles = makeStyles((theme) => ({ classA: { color: 'green' }, classB: { color: 'green' }, classC: { color: 'green' } }) Is there a way to combin ...

javascriptreactjsmaterial-ui

Showing formatted JSON in the view using ASP.NET MVC

Is there a method to modify JSON for presentation in the interface? I am looking for a way to automatically update my API documentation when adding new properties. It would be great if I could also apply CSS styling to certain elements. This feature is som ...

cssxmlasp.net-mvcjsonrazor

What is the best way to send a string from an HTML form, route it through a router, and create and save an object?

Currently, I am facing an issue while attempting to transfer a string from the frontend to the backend. The technologies I am using include Node, Express, Body Parser, EJS, and PostgreSQL. Here is the basic structure of my file system: – app |– api ...

javascriptnode.jsexpressinputbody-parser

What is the best way to combine MVVM, offline storage, and Knockout.js in a project?

Although I have experience with implementing Mvvm using Knockout.js, my goal now is to incorporate this framework with cross-browser support for Firefox and Chrome along with HTML5 offline storage capabilities. Specifically, I am looking to bind HTML obje ...

htmlmvvmknockout.jsoffline-storage

What is the best method for making recursive ajax calls until a specific condition is met?

I need help with a recursive AJAX method that should keep calling until the variable maxnumId is empty or undefined. Currently, my code only runs once. Can anyone point out what I might be doing wrong here? Thank you! Here's the code snippet: <sc ...

javascriptjqueryajaxrecursion

Is there a PHP equivalent of a jQuery-style interface available?

Is there a PHP library available that offers a jQuery-style interface for working with HTML/XML files, particularly using jQuery-style selectors? I am interested in performing tasks like the following examples (purely hypothetical): foreach (j("div > ...

phpjqueryhtmlxmlhtml-parsing

Issues with Jquery datatable causing column header to overlap the table header

I am facing an issue with my datatable as the table is not displaying correctly. Could someone advise me on how to troubleshoot and fix this problem? Below is the code snippet in question: $(tbName).dataTable({ "sScrollX": "100%", "sScro ...

jquerycssdatatables

Using jQuery to merge two JSON objects into a single table

I'm currently working on creating a table like this: <table id="list"> <th>ID</th> <th>Name</th> <th>Price</th> <th>Image</th> < ...

javascriptjqueryget

Adjust the sequence of the series in dimple's multi-series chart using interactive features

My latest project involves a unique dimple interactive chart featuring two series: a pie series and a line series based on the same dataset. You can view the chart at dimplejs.org/advanced_examples_viewer.html?id=advanced_interactive_legends Check out the ...

javascriptjqueryd3.jschartsdimple.js