Center a container div with two divs offset from its center

I attempted to place a banner at the top of a webpage, but ran into trouble with positioning two divs correctly. They were not aligning properly (using the same method as a single static div would) and one was appearing below the other.

Here is the code: http://jsfiddle.net/AndyMP/wFutk

Eventually, I found a different, simpler way to achieve the desired result: http://jsfiddle.net/AndyMP/TJjwp/1/

However, I still find it bothersome that I couldn't make the initial method work. Any advice on how to properly offset from the middle of the container div would be greatly appreciated.

(**Edit: I should mention that this was done in IE9 and you may need to adjust the size of the preview pane in jsfiddle to view it all)

csshtml

Answer №1

The reason one div appeared below the other is due to your utilization of position: relative (See Specification). With this setting, the divs are initially laid out in a normal flow before being offset. Therefore, applying top: 2px shifted each one 2 pixels below its original position.

To resolve this issue, consider using position: absolute for both inner divs instead.

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

Design a layout consisting of a grid with items that maintain a set maximum width while being evenly distributed across the entire width of the device

I'm trying to create a grid with 2 rows and 3 columns, each cell having an image with a max-width of 512px. I added margin to the grid but now the cells are larger than the content. How can I achieve the same visual appearance as flexbox's justif ...

htmlcsscss-grid

Words in motion as the transition unfolds

Hey everyone, I'm encountering an issue with animations. I have an image that transitions on hover, but the text just below it is moving slightly as well. This is causing layout problems for me. I attempted to use absolute positioning based on a simil ...

htmlcsscss-transitions

Attempting to determine income in JavaScript with the inclusion of two distinct rates

Trying to come up with a salary calculation for different rates within the same timeframe is proving to be quite challenging. For instance, between 10:00-15:00 the rate is $20 per hour and from 15:00 onwards it drops to $15 per hour. Check out the entire ...

javascripthtmlreactjs

I am having issues with this knob not updating, and the reason for this problem is unknown to me

Within my PHP code, I am utilizing the following: <?php @include_once('fields.php'); $gg = fetchinfo("val","inf","n","current"); $mm = fetchinfo("val","info","n","max"); $cc = fetchinfo("num","games","id",$gg); $percent = $cc / $mm * 100; ...

javascriptphphtml

Minor hiccup in the CSS animation

While creating a CSS animation for a responsive menu icon that transforms into an "X" when clicked, I encountered a minor glitch. The top line of the menu icon flickers down by about 1px after the X shape is formed, causing it to continue moving while the ...

cssanimation

Angular 7 Material: How to perfectly center align your cards side by side

When I have an abundance of material cards, they tend to align vertically. Is there a way to align the cards horizontally from left to right instead? ...

htmlcssangularangular-material

The tree expansion does not activate the CSS transition

Currently, I am in the process of creating a TreeView using only CSS and JS. My goal is to include a subtle transition effect when expanding or collapsing a node. The transition effects are successfully implemented for collapsing nodes, however, they do no ...

javascripthtmljquerycsstransition

Retrieving a completely random caption from a text file with JavaScript and showcasing it in HTML

I need help loading a random caption each time my page loads. I have a text file with a string on each line, but I'm new to HTML and JavaScript. Here's my code: <div class="centerpiece"> <h1>DEL NORTE BANQUEST</h1 ...

javascriptjqueryhtmlcss

The initial component within the HTML body tag is firmly fixed in the upper left corner

I have encountered a persistent issue with my CSS exercises where the first element inside the body tag, whether it's an image or heading, remains fixed at the top left corner of the page. It seems impossible to move it using margin adjustments or cha ...

htmlcss

The Date validation script in Javascript is malfunctioning

I encountered an issue where the script I used in my HTML file didn't work as expected. The purpose of this script was to prevent users from submitting a date greater than today's date. Interestingly, when I copied the same script to another HTML ...

javascripthtmlcss

Issues arise when a questionnaire is duplicated

Currently, I am working on a questionnaire that involves the cloning feature in jQuery using .clone(). The questions are answered using checkboxes with options for yes or no. These checkboxes are placed within a table and controlled by the following script ...

jqueryhtmllaravelcheckboxcheckboxlist

What is the method for displaying an asterisk in a select box option?

Is there a way to append an asterisk after the first option in a select element? Here is my html <select class="form-control textyformcontrol"> <option selected>Service area</option> <option>First Option</option> &l ...

htmlcss

The Toggle Functionality necessitates a double-click action

I'm currently working on implementing a menu that appears when scrolling. The menu consists of two <li> elements and has toggle functionality. Everything is functioning properly, except for the fact that the toggle requires two taps to activate ...

javascripthtmlcss

Guide on sending a key to a text input field using JavaScript

How can I simulate sending a combination of keys (such as Ctrl+C or Alt+Shift) when the cursor enters an input text field using Javascript? I am not utilizing jQuery, but rather MS-Ajax. Is it achievable with MS-Ajax DOM? EDIT 1) Following @Ghostoy&apos ...

javascripthtmlajax

What strategies can I use to ensure consistent website layout across various zoom levels and browsers?

As a newcomer to web design, I am excited that my site is almost ready to go live. However, I have encountered some significant issues right before launch. When the site is zoomed in or out, the content becomes misaligned at certain zoom percentages. Add ...

htmlcsslayout

Shorten a data point in JSON code

I'm currently in the process of developing a stock widget that utilizes JSON to retrieve data from the Yahoo API/YQL console. I am specifically working with values extracted from the key ChangePercentRealtime, however, the values are longer than what ...

javascriptjqueryhtmljson

Unable to scroll the HTML page to view the complete content

View the CSS images (2 total) and the HTML image below: CSS top CSS bottom HTML ...

htmlcss

Using Jquery to run a jquery script stored in a variable within jQuery syntax

This question may seem a bit confusing, so allow me to explain further. I am trying to execute a jquery script that is written in a text file obtained through an ajax request. For example, the code I receive from the ajax request looks like this: ($($(" ...

javascriptjqueryhtmlajax

Aligning table elements for optimal responsiveness

Need a hand with my HTML email code. I'm struggling to center the "resort boxes" when viewed on smaller screens like phones. Tried everything but can't crack it. Appreciate any help! https://i.sstatic.net/V6Rdr.jpg <html> <head> ...

htmlcsshtml-email

index.html: using jquery for selecting colors

I attempted to integrate a jQuery plugin into my application, but it doesn't seem to be working. In the head section of my code, I have included: <link rel="stylesheet" media="screen" type="text/css" href="./style/colorpicker.css" /> <script ...

jquerycss