Wrapping two divs in CSS without altering the HTML code is a convenient

Question

Wrapping two divs in CSS without altering the HTML code is a convenient

Having a display flex with three divs, which is a shared component among multiple teams, makes it challenging for me to edit.

My only option is to update the CSS. In the fiddle, the first part displays the current layout while the second part shows the expected layout.

Using CSS only, I am required to modify the following:

<div class="flex">
  <div class="square blue">
    x
  </div>
  <div class="square red">
   x
  </div>
  <div class="square yellow">
    x
  </div>
</div>

In order to achieve the desired rendering as shown in the second html snippet (Refer to JSFiddle) :

<div class="flex">
  <div class="square blue">
  x
  </div>
  <div class="square">
   <div class="square red">
    x
   </div>
   <div class="square yellow">
    x
   </div>
  </div>
</div>

https://jsfiddle.net/h8o523tL/33/

html css flexbox

Answer 1

Answer №1

To achieve your desired layout, you can utilize CSS grid in the following way:

.flex {
  display: grid;
  grid-template-areas: 
   "blue red" 
   "blue yellow";
}

.blue {
  grid-area: blue;
  background-color: blue;
}

.red {
  grid-area: red;
  background-color: red;
}

.yellow {
  grid-area: yellow;
  background-color: yellow;
}

<div class="flex">
  <div class="square blue">
    x
  </div>
  <div class="square red">
    x
  </div>
  <div class="square yellow">
    x
  </div>
</div>

UPDATE

If you need more browser support, consider this alternative approach:

.flex {
  position:relative;
  overflow:hidden;
}
.blue {
  position:absolute;
  height:100%;
  top:0;
  left:0;
  width:50%;
  background-color: blue;
}

.flex:before {
  content:"";
  min-height:1px;
  width:50%;
  float:left;
}

.red {
  background-color: red;
  width:50%;
  float:left;
}

.yellow {
  background-color: yellow;
  width:50%;
  float:right;
}

<div class="flex">
  <div class="square blue">
    blue
  </div>
  <div class="square red">
    red
  </div>
  <div class="square yellow">
    yellow
  </div>
</div>

Answer 2

To achieve your desired layout, you can utilize CSS grid in the following way:

.flex {
  display: grid;
  grid-template-areas: 
   "blue red" 
   "blue yellow";
}

.blue {
  grid-area: blue;
  background-color: blue;
}

.red {
  grid-area: red;
  background-color: red;
}

.yellow {
  grid-area: yellow;
  background-color: yellow;
}

<div class="flex">
  <div class="square blue">
    x
  </div>
  <div class="square red">
    x
  </div>
  <div class="square yellow">
    x
  </div>
</div>

UPDATE

If you need more browser support, consider this alternative approach:

.flex {
  position:relative;
  overflow:hidden;
}
.blue {
  position:absolute;
  height:100%;
  top:0;
  left:0;
  width:50%;
  background-color: blue;
}

.flex:before {
  content:"";
  min-height:1px;
  width:50%;
  float:left;
}

.red {
  background-color: red;
  width:50%;
  float:left;
}

.yellow {
  background-color: yellow;
  width:50%;
  float:right;
}

<div class="flex">
  <div class="square blue">
    blue
  </div>
  <div class="square red">
    red
  </div>
  <div class="square yellow">
    yellow
  </div>
</div>

Wrapping two divs in CSS without altering the HTML code is a convenient

Answer №1

Similar questions

Navigating up and down effortlessly using bootstrap

Enhance the input by incorporating more fields without altering the existing content

What is the best way to adjust the visible height of a div and enable scrolling to view the rest of the content?

Using a variable with the :contains selector

Clicking the save button in the modal updates the text on both the current tab and any previously clicked tabs

Tips for enhancing the presentation of JSON information

Bootstrap 4 Cards in a single line

What is the process for translating a single line of code from jQuery to vanilla JavaScript?

What is the best way to remove table cells from a TableBody?

The scrollbar remains unresponsive and fixed until the screen size is adjusted

Image missing aria-label attribute

Ways to automatically assign default select options using an array

When an image is clicked, I would like it to redirect to a different page

Markdown boasts of a sturdy partially-horizontal line

Content in tab remains stagnant

What is the best way to showcase data from an external model without having to constantly refresh the page?

What is the best way to ensure my images are centered when transitioning to full screen mode?

"Troubleshooting problem with aligning divs in Angular using

Challenges with finding web elements using Selenium

Loss of styling is observed with jQuery's html() function