The alignment of the DIV elements is not as I had hoped

I currently have three different divs on my webpage. Two of them are background divs stacked on top of each other, while the third one contains content and is positioned within the lower background div. My issue arises when I try to make the content div cover both background divs by giving it a negative top margin of -20px. While this adjustment looks correct in Dreamweaver, once I view it in Safari, the content div ends up pulling the lower background div upwards along with it.

<div style="height:40px; width:500px; margin-left:auto; margin-right:auto; background-color:#CF3; margin-top:100px;"></div>
<div style="height:100px; width:400px; margin-left:auto; margin-right:auto; background-color: #0FF;">
    <div style="height:80px; width:300px; margin-left:auto; margin-right:auto; background-color: #F00; margin-top:-20px;"></div>
</div>

This is the result I was aiming for: Image of desired outcome http://www.snapfoot.com/audio/good.jpg

However, this is what I actually ended up with - not what I wanted. The blue background should stay in place, not move up with the red one. Unwanted result image http://www.snapfoot.com/audio/bad.jpg

If anyone can offer guidance on where I might be making a mistake, I would greatly appreciate it!

htmlcss

Answer №1

Creating a Centered Layout with HTML and CSS

<div id="backgroundTop" class="center">
    <div id="content" class="center"></div>
</div>
<div id="backgroundBottom" class="center"></div>

By nesting the #content div inside the #backgroundTop, you can set a top margin for the content relative to the background div. This can be achieved using CSS as shown below.

The CSS Styles

#backgroundTop
{
    height:40px;
    width:500px;
    background-color:#CF3;
}

#backgroundBottom
{
    height:100px;
    width:400px;
    background-color: #0FF;
}

#content
{
    /*Positioning Magic*/
    position: relative;
    top: 15pt;
    /******************/
    height:80px;
    width:300px;
    background-color: #F00;
}

.center
{
    margin: 0 auto;
}

Check out the demo on jsFiddle: http://jsfiddle.net/yBq2V/1/

Answer №2

<div style="height:40px; width:500px; margin-left:auto; margin-right:auto; background-color:#CF3; margin-top:100px;"></div>
<div style="height:80px; width:300px; margin-left:auto; margin-right:auto; background-color: #F00; margin-top:-20px; position: relative; z-index: 9999;"></div>
<div style="height:100px; width:400px; margin-left:auto; margin-right:auto; background-color: #0FF; margin-top: -60px;">
</div>

Does this match your intended design?

Check out the fiddle link for a preview: http://jsfiddle.net/TzK6a/1/

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

Implement a feature in JS/HTML where clicking on a button shifts a specific section of a row from one table to another while simultaneously deleting the remaining

I am facing an issue with two tables - addFriends and existingFriends. The addFriends table contains a button in the fourth column, which, upon clicking, should delete the corresponding row from that table and add it to the existingFriends table. Currentl ...

javascripthtmlcss

Ways to remove the uploaded document

I have been tasked with uploading a file. The file comes with a remove button, which can be pressed to delete it. Below is the code I used: The code snippet is as follows: <div id="main"> <p id="addfile1">Add File</p> <div id ...

javajavascriptjqueryhtmlfile-upload

Could you suggest an alternative method for retrieving the image from the database and displaying it in the Dynamic Carousel?

Many people have asked the same question, but none of their solutions have worked for me. I used bootstrap to create a Dynamic Carousel that fetches images from the database folder path (uploadimages/news/) and used a foreach loop to iterate over arrays. H ...

phphtmlmysqlbootstrap-4

Is Inline Styling the Key to Effective MVC Client-Side Validation?

Having some trouble with my form's client-side validation. I'm using data annotations and models, but the default display is not visually appealing. I've tried applying CSS, but getting tooltip style errors has been a challenge. What I real ...

cssmodel-view-controllervalidation

Obtaining the text of a span tag within a div using Selenium in C#

<div id="uniqueSummaryID" class="custom-text" data-reactid=".0.0.0.3.0.0.1.0.0.0.0.$unique_key_25.1.1.0"> <span data-reactid=".0.0.0.3.0.0.1.0.0.0.0.$unique_key_25.1.1.0.0">5</span> <span data-reactid=".0.0.0.3.0.0.1.0.0.0.0.$unique_ke ...

c#htmlcssselenium

Using the mpdf addPage function generates new empty pages

Hey there, I'm facing an issue where using $mpdf->addPage() within a for loop results in creating blank pages instead of adding content. My goal is to generate a new page when a certain condition is met and then populate it with the required conten ...

phphtmlcssmpdf

Is there a way to remove any incomplete information from the output (window.alert) in JavaScript when a user does not fill in all the prompts?

I am seeking input for 8 pieces of information to be displayed in an alert box, only if the user enters something in each field. All the gathered data will be shown in a single alert box once the user confirms their desire to review it. If the user choos ...

javascripthtmlnull

Expanding and collapsing DIV elements using JavaScript upon clicking navigation menu items

At present, the current code unfolds the DIVs whenever a user clicks on a menu item. This results in the DIV folding and unfolding the same number of times if clicked repeatedly on the same link, without staying closed. My desired functionality is to have ...

javascriptjqueryhtmlcss

Embed JavaScript code in the head section of the webpage to guarantee its presence even following a page refresh

We recently obtained an innovative Enterprise Talent Management Solution that is cloud-based. One standout feature allows users to incorporate HTML Widgets with scripts on the primary Welcome Page. The customization options for the Welcome Page UI are qui ...

javascriptjqueryhtmlcsscode-injection

Executing various onclick functions - Text Display

I've developed a code that includes onclick events to change the color of buttons and prevent them from being clicked twice. Additionally, I am looking to have data added to a table column/row when a button is clicked. For example, clicking button 3 s ...

javascripthtmlcss

Adding EventListeners for Click Handling: A Step-by-Step Guide

Here is the part of my code in HTML: <!DOCTYPE html> <html> <head> <h> <title> This page</title> </h> </head> <body> <button id = "go-button" >GO ...

javascripthtmlcsswebfrontend

Utilizing CSS to Properly Position HTML Elements

Check out my code on jsFiddle I'm facing some challenges in positioning HTML elements using CSS. While I grasp the fundamental concepts of block and inline elements, implementing them in real coding scenarios can be confusing. I've shared my HTM ...

htmlcss

Defaulting summernote to display in italics

Looking for a way to italicize a series of summernote inputs by default? I have removed all toolbar options except the italics button. Here's the HTML generating these inputs: <div style="width:250px;"> < ...

javascriptcssasp.net-mvcsummernote

Display temporary image until real image loads within ng-repeat angularjs

I am looking to display a placeholder image while the actual image is being loaded. I have tried using the ng-image-appear plugin. The issue I'm facing is that the placeholder image does not appear for img elements inside ng-repeat, although it works ...

javascripthtmlangularjsimage

What is the best way to save a table to local storage in HTML after dynamically adding rows using JavaScript or AngularJS?

I came across this code on the following link. http://codepen.io/akashmitra/pen/eNRVKo HTML <div ng-app="app" ng-controller="Ctrl"> <table class="table table-bordered table-hover table-condensed"> <tr style="font-weight: bold"> ...

javascriptjqueryhtmlangularjslocal-storage

Creating an interactive animation of bouncing balls within an HTML5 canvas using JavaScript

function refBalls(){ var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var circles = [{x:40,y:100,r:20,color:'black',vx:5,vy:10}] function draw(){ ctx.beginPath(); ctx.arc(circles[0].x, circles[0].y, circles[0].r, ...

javascripthtmlcss

Website errors appear on the hosted page in <body> section without being present in the code

Hello there, I have set up a debug website using my "Olimex ESP-32 POE" to send internal data via JSON, eliminating the need for Serial Output from the Arduino IDE (the reasons behind this are not relevant). #include "Arduino.h" #include <WiF ...

javascripthtmlc++jsonesp32

choosing a date range

My goal was to determine the number of days between a "fromDate" and a "toDate," with the restriction that the user should not be able to select a date range of more than 90 days. I am utilizing the Dojo framework to create a date calendar. Below is the co ...

javascripthtmljspdojo

Is there a way for rainyday.js to utilize a CSS background image as its background?

I have a simple website with a fixed, full-sized background set using CSS. I am trying to incorporate rainyday.js to create a rain effect over the entire site, including the text. Currently, I am only able to get rainyday.js to display rain over a small s ...

javascriptjqueryhtmlcss

Is there a way to set all offset sides in CSS simultaneously?

Is it possible to use the following syntax instead of setting each direction separately? sides:0px; ...

htmlcss