Achieving overlapping div layouts with CSS styling

Question

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.

https://i.sstatic.net/QhhEV.jpg

html css

Answer 1

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

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 3

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 4

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 5

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>

Answer 6

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>

Achieving overlapping div layouts with CSS styling

Answer №1

Answer №2

Answer №3

Similar questions

Switching off toggle does not switch back to primary theme when clicking again for the second time

Selenium is unable to activate the button element by clicking

navigation bar directing to the wrong destination

Using a for loop, how can the property value be set in another object?

What is the best way to add the SO-style <kbd> effect to my presentation made with HTML?

"To ensure consistent alignment, position list items with varying heights at the bottom of the

Content from PHP's unlink() function continues to persistently display

I would like to know the method for inserting an HTML element in between the opening and closing tags of another HTML element using

the stacking context of elements with z-index and relative positioning

Using percentages for sizing and margins in CSS

Python script using Selenium to only print elements in an HTML page that have a specific class value and print only certain elements based on

Is there an issue with this html code?

"There seems to be an issue with the KeyListener function in

Ways to dynamically manipulate HTML elements in Angular 5

The password-protected HTML blog remains hidden until the correct entry is entered into the password box, causing

What could be causing my HTML button to malfunction when attempting to navigate to a different section of the webpage?

What is the best way to target and style anchor links in CSS that are not empty?

Issues with executing google.script.run in Google Web App

Utilize CSS block display for ::before and ::after pseudo elements within a div container

What are some effective ways of using the parent, before, and children selectors?