Achieving overlapping div layouts with CSS styling

Displayed above are 4 different divs: red, green, and blue. I am seeking to have the blue div positioned directly below the green div, which contains the text "JACKSON". Additionally, I do not want the green div to expand beyond its content, nor do I want the red div to expand at all. The blue div should be centered according to the text "JACKSON", with a higher z-index than the other divs. My goal is to achieve this using only css.

Please note that the divs will not have specific pixel values for width and height.

htmlcss

Answer №1

To center the blue div next to the JACKSON div, you can utilize CSS3 transforms. This method ensures that regardless of the size of the green divs, the blue div will always be centered (remember to include other necessary css prefixes):

HTML

<div class="red">
  <div class="green">
    DAVID
  </div>
  <div class="green">
    JACKSON
    <div class="blue">
      WHO IS DAVID AND JACKSON?
    </div>
  </div>
</div>

CSS

.red, .green, .blue{
  box-sizing: border-box;
  display: inline-block;
  padding: 5px;
}

.red{
  border: 2px solid red;
}

.green{
  border: 2px solid green;
  position: relative;
}

.blue{
  border: 2px solid blue;
  display: block;
  position: absolute;
  transform: translate(-50%, 100%);
  left: 50%;
  top: 0;
  white-space: nowrap;
}

View example on jsfiddle

Answer №2

Here is a simple CSS code snippet that you can customize to suit your needs.

To create an "overlap" effect with your div, you can adjust the margin property or combine it with the position property along with values like top, left, right, or bottom.

.red, .green, .blue {border: solid 4px; display: inline-block;}
.red {border-color: red;}
.green {border-color: green; margin-bottom: 1em;}
.blue {border-color: blue; margin-left: 2em; position: relative; top:-1em;}
<div class="red">
  <div class="green">David</div>
  <div class="green">Jackson</div>
</div>
<br />
<div class="blue">Who are David and Jackson?</div>

Answer №3

Do you think something like this could work for your needs?

.red {
  width: auto;
  display: inline-block;
  position: relative;
  padding: 5px;
  border: 2px solid red;
}

.green {
  width: auto;
  display: inline-block;
  vertical-align:top;
  padding: 5px;
  border: 2px solid green;
}
.blue {
  width: 35%;
  display: block;
  padding: 5px;
  border: 2px solid blue;
  margin-top: -10px;
  text-align:center;
  z-index:1;
  position:relative;
}
<div class="red">
  <div class="green">David</div>
  <div class="green">Jackson</div>
</div>
<div class="blue">Who are David and Jackson?</div>

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

Organize Radio Selectors

My intention was to align the radio buttons as shown in the image below: https://i.stack.imgur.com/oPTjD.jpg However, the final result looked like this https://i.stack.imgur.com/Mixga.jpg Below is the code for your reference HTML <div class="form ...

htmlcssangular

Allow the content to be scrolled

When it comes to my CSS script, I encounter no issues on larger computer screens. However, users with smaller resolutions like 1024 x 768 are experiencing problems viewing the entire HTML page. Only half of the page is displayed, making it impossible for t ...

htmlcss

How to retrieve and delete a row based on the search criteria in an HTML table using jQuery

Here is the HTML code snippet: <table class="table" id="myTable"> <tr> <th>Type</th> <th>Counter</th> <th>Remove</th> <th style="display:none;">TypeDistribution</t ...

javascriptjqueryhtmlsearchhtml-table

What is the best way to incorporate an image as an input group addon without any surrounding padding or margin?

Hello, I am currently working on integrating a captcha image into a Bootstrap 4 form as an input group item. It is functioning correctly, but there is an issue with a border around the image causing the input field to appear larger than the others. Below i ...

htmlcsstwitter-bootstrapbootstrap-4

String iteration with Stylus

Is there a way to remove the brackets and the quotation marks when putting media queries into an object and looping over them? The code works well, but the stylus is causing the output to have unwanted characters. Here's my code: $maxBreakpoints = { ...

cssstringiterationstylus

stream a song with a font awesome symbol

Can an audio track be played using a font awesome icon, such as displaying the song name (mp3) with a play icon right next to it? When users click on the play icon, can the track start playing and be paused or stopped at will? The list will consist of app ...

javascripthtmlfont-awesomemp3

Firefoxy can't seem to get through the navigation keys within an element that has a hidden

Check out this fiddle I created: http://jsfiddle.net/c11khcak/13/. My goal is to hide the scrollbar of an element while still allowing it to be scrollable using the mouse wheel and up/down navigation keys. I've been able to achieve this using some bas ...

htmlcssfirefoxscroll

Displaying a div based on the response after it is received using an if/else statement

In my form, each question is on a separate page (div), with the ability to show and hide pages. If a user receives a response from the API with a status of "accepted", they are redirected to a URL. I'm currently trying to display a div if their status ...

javascriptjqueryhtmlcssjson

Creating a JavaScript file to incorporate into an HTML document

I stumbled upon this code snippet here This code allows me to fetch data from a php file and insert it into a div using jQuery. While the tutorial works perfectly, I'm planning to use this for about 9-10 different links and thought of consolidating a ...

phpjavascriptjqueryhtmlhyperlink

How to create a bottom border in several TD elements using a combination of CSS and jQuery

Check out my Website: Search Page I have written some CSS that functions well when searching by Name, but not by Specialty: .displayresult { display: block; } #fname, #lname, #splabel, #addlabel, #pnlabel { border-width: 4px; border-bottom-st ...

jquerycss

Copying content from one website to another using JavaScript

Currently, I am working on a website which stores data and I require assistance in transferring this data to another site. If you have any suggestions using Javascript or other methods, please let me know. ...

javascripthtmlajaxweb

I am looking to generate div elements using JavaScript to avoid the tedious task of individually creating numerous divs

Instead of manually typing out multiple div tags in the HTML, I would like to dynamically generate them using JavaScript and display them on the page. Below is an attempt at achieving this, but it appears to not be functioning correctly. var arr = {}; f ...

javascriptjqueryhtml

`CSS Animation fails to run in Internet Explorer and Microsoft Edge browsers`

My issue with the CSS animation is that while the opacity animates properly, the translate effect does not seem to work as expected. You can see the problem here: https://jsfiddle.net/bLxb8k3s/ It appears that the reason for this issue is because IE and ...

cssinternet-explorercss-animationsmicrosoft-edge

Display and conceal specific table cells based on a user's search for a singular cell

I recently wrote a jQuery script to filter rows in a table based on user input. However, I encountered an issue with my current code when trying to search for a specific string within the table. Here's the scenario: a|b|c|d| e|f|g|h| i ...

jqueryhtmlajax

Show the precise selection from one dropdown menu based on the chosen value in another dropdown menu

How can I retrieve the scheduleID value from a specific MovieID value within a comboBox? Movie Selection Box: <?php $query = "select * from ref_movies ORDER BY MovieID"; $result = mysql_query($query) or die (mysql_error()); echo '<s ...

phphtmlmysql

Incorporating a Bootstrap input group within a <td> element of a table

Encountering an issue when attempting to include a bootstrap input-group-addon with the input field nested inside a <td> tag within a table. Once all necessary classes are applied, there appears to be some spacing between the sign and the input field ...

htmlruby-on-railstwitter-bootstrapruby-on-rails-4twitter-bootstrap-3

A comprehensive guide on associating a JavaScript function with an element attribute

I am looking for a way to assign a JavaScript function to an HTML attribute. For example: <li data-ng-repeat="job in jobList" class= dynamicClass(str) data-filter = "dynamicFilter(str)"> The reason I want to do this is because the class name and ...

javascriptjqueryhtmlcss

Detecting changes in a readonly input in Angular 4

Here is a code snippet where I have a readonly input field. I am attempting to change the value of this readonly input from a TypeScript file, however, I am encountering difficulty in detecting any changes from any function. See the example below: <inp ...

javascriptjqueryhtmlangulartypescript

I am experiencing an issue where the CSS file in the wwwroot directory does not update when I make changes to the code in ASP.NET MVC

Here is a link to my CSS file: Click here for image description This is how the file looks when built (no changes): Click here for image description Occasionally, running "clean-solution" and "build-solution" fixes the issue, but it's not working no ...

c#cssasp.net-mvcuploadwwwroot

ensure that the element matches the height of its parent element

Allow me to illustrate the issue with a visual aid. In the provided image, you can observe that the checkmark is perfectly centered vertically in the one-line p element. However, as the text extends to two or three lines within the p element, the checkmar ...

css