positioning a div element in front of a centered div

Question

positioning a div element in front of a centered div

Is it feasible to position a div element directly preceding a centered element? The aim is for the centered div element to align with the div element above. I am seeking to achieve the layout illustrated in the following diagram:


           --------
           |      |
           |  1   |
           --------
     ----  --------
     |   | |      |
     |3  | |  2   |
      ---  --------

div blocks 1 and 2 should be stacked on top of each other. This can be achieved by simply using margin: 0 auto;

.div1 .div2{
  margin: 0 auto
}

However, I am facing challenges in positioning div block 3 right before 2. Even a float:left on div block 3 did not yield the desired result. Is there a way to insert div block 3 before 2 while maintaining the margin: 0 auto property on div block 2? Any assistance or guidance would be greatly appreciated.

html css

Answer 1

Answer №1

One approach to consider is using CSS grid for layout:

.container {
  display:grid;
  grid-template-columns:1fr auto 1fr;
}

.container > div {
  min-height:50px;
  min-width:200px;
  outline:1px solid;
  grid-column:2;
}
.container > div:last-child {
  grid-column:1;
  grid-row:2;
}

<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

Alternatively, you can explore using flexbox for the layout:

.container {
  display:flex;
  flex-wrap:wrap;
}

.container > div {
  min-height:50px;
  min-width:200px;
  outline:1px solid;
}
.container > div:first-child {
  order:-2;
  margin:auto; 
}
.container > div:last-child {
  order:-1;
  margin:0;
  flex:1;
}

/*to create break line*/
.container:before {
  content:"";
  order:-1;
  flex-basis:100%;
}

/*to have the same as 3*/
.container:after {
  content:"";
  flex:1;
}

<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

Another option to explore is positioning elements:

.container {
  position:relative;
}

.container > div:not(:last-child) {
  min-height:50px;
  max-width:200px;
  outline:1px solid;
  margin:auto;
}

.container > div:last-child {
  position:absolute;
  left:0;
  bottom:0;
  width:calc((100% - 200px)/2);
  min-height:50px;
  outline:1px solid;
}

<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

Answer 2

One approach to consider is using CSS grid for layout:

.container {
  display:grid;
  grid-template-columns:1fr auto 1fr;
}

.container > div {
  min-height:50px;
  min-width:200px;
  outline:1px solid;
  grid-column:2;
}
.container > div:last-child {
  grid-column:1;
  grid-row:2;
}

<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

Alternatively, you can explore using flexbox for the layout:

.container {
  display:flex;
  flex-wrap:wrap;
}

.container > div {
  min-height:50px;
  min-width:200px;
  outline:1px solid;
}
.container > div:first-child {
  order:-2;
  margin:auto; 
}
.container > div:last-child {
  order:-1;
  margin:0;
  flex:1;
}

/*to create break line*/
.container:before {
  content:"";
  order:-1;
  flex-basis:100%;
}

/*to have the same as 3*/
.container:after {
  content:"";
  flex:1;
}

<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

Another option to explore is positioning elements:

.container {
  position:relative;
}

.container > div:not(:last-child) {
  min-height:50px;
  max-width:200px;
  outline:1px solid;
  margin:auto;
}

.container > div:last-child {
  position:absolute;
  left:0;
  bottom:0;
  width:calc((100% - 200px)/2);
  min-height:50px;
  outline:1px solid;
}

<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

Answer 3

Answer №2

I am a strong advocate for utilizing CSS Grid and the use of grid-template-areas. If you are not familiar with the syntax, the . signifies an empty cell within the grid structure.

.container { 
  display: grid;
  grid-gap: 8px;
  grid-template-areas: ". one"
                       "three two";
}
.container div {
  border: 1px dashed;
  padding: 4px;
}

.div1 {
  grid-area: one;
}

.div2 {
  grid-area: two;
  justify-self: flex-start;  
}

.div3 {
  grid-area: three;
  justify-self: flex-end;  
}

<div class="container">
  <div class="div1">div 1</div>
  <div class="div2">div 2</div>
  <div class="div3">div 3</div>
</div>

Latest Update

I have made adjustments to the grid items to better suit the requirements outlined in the comments. I have removed the justify-content: center from the grid parent, allowing the grid items to expand to the parent container. Instead, I have used justify-self to pin both div2 and div3 to the center of the grid.

Answer 4

I am a strong advocate for utilizing CSS Grid and the use of grid-template-areas. If you are not familiar with the syntax, the . signifies an empty cell within the grid structure.

.container { 
  display: grid;
  grid-gap: 8px;
  grid-template-areas: ". one"
                       "three two";
}
.container div {
  border: 1px dashed;
  padding: 4px;
}

.div1 {
  grid-area: one;
}

.div2 {
  grid-area: two;
  justify-self: flex-start;  
}

.div3 {
  grid-area: three;
  justify-self: flex-end;  
}

<div class="container">
  <div class="div1">div 1</div>
  <div class="div2">div 2</div>
  <div class="div3">div 3</div>
</div>

Latest Update

I have made adjustments to the grid items to better suit the requirements outlined in the comments. I have removed the justify-content: center from the grid parent, allowing the grid items to expand to the parent container. Instead, I have used justify-self to pin both div2 and div3 to the center of the grid.

positioning a div element in front of a centered div

Answer №1

Answer №2

Similar questions

What is the process for inspecting the element within a div using jsname with JS?

"Unfortunately, SimplyScroll isn't functioning properly on this particular page

Adjust parent div size automatically when child is resized - jQuery Resizable Plugin

Styling menus with CSS

Python web scraper unable to locate specified Xpath

Personalize the file button for uploading images

Using Jquery .ajax to Populate Select Dropdown with JSON Data

Reveal or conceal the footer section as you reach the end of the webpage

What could be the reason my span is not altering color as I scroll?

Acknowledging client after client to server POST request has been successfully processed in Node.JS

Is it possible to utilize a function to manipulate the [checked] attribute of a checkbox and toggle it between true and false?

Swap out the div block with a new one

Is there a way to view images embedded in local .msg files in a web browser in HTML format?

Strategies for aligning a div element in the middle of the screen

Connect ng-models with checkboxes in input field

Access dynamic content from Tinymce 4.x without any manual effort

How can Bootstrap 4 be utilized to achieve a responsive height on a single page application with no scrolling?

increasing sticky header, refreshes the scroll location of the website

Tips on eliminating the gap between the dropdown menu in Firefox browser

Incorporate different courses tailored to the specific job role