Utilize CSS to ensure divs display inline-block, but stack them only if they overlap

Question

Utilize CSS to ensure divs display inline-block, but stack them only if they overlap

Below are the div elements I have:

.parent {
  padding: 10px;
  background: grey;
}

.child {
  background: green;
  display: block;
  position: relative;
  width: 50px;
}

.stacked {
  left: 0px;
}

.three {
  left: 200px;
}

<div class="parent">
  <div class="child stacked">div1</div>
  <div class="child stacked">div2</div>
  <div class="child three">div3</div>
</div>

This is how it appears: https://i.sstatic.net/iuyjX.png

I want divs 1 and 2 to stack as they currently do. However, since div3 does not overlap with the above divs, I would like it to be vertically aligned with div 1.

If I change the display property to inline or inline-block, div 2 gets pushed to the right of div one. Additionally, the left values do not align accurately with the parent container. https://i.sstatic.net/skJyh.png

The left values of the divs will be dynamically generated, so predicting if there is overlap between them is challenging.

Is achieving this alignment feasible?

html css display

Answer 1

Answer №1

Update: If you are looking to align the 3rd div using positioning, here's how you can achieve it:

.parent {
  padding: 10px;
  background: grey;
  position: relative;
}

.child {
  background: green;
  display: block;
  position: relative;
  width: 50px;
}

.stacked {
  position: relative;
  left: 0px;
}

.three {
  position: absolute;
  left: 200px;
  top: 10px;
}

<div class="parent">
  <div class="child stacked">div1</div>
  <div class="child stacked">div2</div>
  <div class="child three">div3</div>
</div>

You can utilize the column-count property as shown below:

.parent {
  padding: 10px;
  background: grey;
  column-count: 2;
}

.child {
  background: green;
  display: block;
  width: 50px;
}

<div class="parent">
  <div class="child">div1</div>
  <div class="child">div2</div>
  <div class="child">div3</div>
</div>

Alternatively, you can employ flexbox for vertical wrapping like this:

.parent {
  padding: 10px;
  background: grey;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 50px;
}

.child {
  background: green;
  display: block;
  width: 50px;
}

<div class="parent">
  <div class="child">div1</div>
  <div class="child">div2</div>
  <div class="child">div3</div>
</div>

Here is an example using grid:

.parent {
  padding: 10px;
  background: grey;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: 1fr 1fr;
}

.child {
  background: green;
  display: block;
  width: 50px;
}

<div class="parent">
  <div class="child">div1</div>
  <div class="child">div2</div>
  <div class="child">div3</div>
</div>

Answer 2

Update: If you are looking to align the 3rd div using positioning, here's how you can achieve it:

.parent {
  padding: 10px;
  background: grey;
  position: relative;
}

.child {
  background: green;
  display: block;
  position: relative;
  width: 50px;
}

.stacked {
  position: relative;
  left: 0px;
}

.three {
  position: absolute;
  left: 200px;
  top: 10px;
}

<div class="parent">
  <div class="child stacked">div1</div>
  <div class="child stacked">div2</div>
  <div class="child three">div3</div>
</div>

You can utilize the column-count property as shown below:

.parent {
  padding: 10px;
  background: grey;
  column-count: 2;
}

.child {
  background: green;
  display: block;
  width: 50px;
}

<div class="parent">
  <div class="child">div1</div>
  <div class="child">div2</div>
  <div class="child">div3</div>
</div>

Alternatively, you can employ flexbox for vertical wrapping like this:

.parent {
  padding: 10px;
  background: grey;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 50px;
}

.child {
  background: green;
  display: block;
  width: 50px;
}

<div class="parent">
  <div class="child">div1</div>
  <div class="child">div2</div>
  <div class="child">div3</div>
</div>

Here is an example using grid:

.parent {
  padding: 10px;
  background: grey;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: 1fr 1fr;
}

.child {
  background: green;
  display: block;
  width: 50px;
}

<div class="parent">
  <div class="child">div1</div>
  <div class="child">div2</div>
  <div class="child">div3</div>
</div>

Answer 3

Answer №2

If you want to improve the layout, consider placing div3 inside a wrapper div with a class of flex-container.

.flex-container {
  justify-content: flex-start;
}

Make sure that the flex direction is set to horizontal for better alignment.

Answer 4

If you want to improve the layout, consider placing div3 inside a wrapper div with a class of flex-container.

.flex-container {
  justify-content: flex-start;
}

Make sure that the flex direction is set to horizontal for better alignment.

Utilize CSS to ensure divs display inline-block, but stack them only if they overlap

Answer №1

Answer №2

Similar questions

In PHP, special characters in HTML remain unchanged when entered into a text input field

Allow the div to break out of the overflow: hidden property without disrupting the overall page layout

The show more/show less link for a long jQuery paragraph is malfunctioning

When viewed through the Firefox browser on an Android device, the text on the webpage suddenly enlarg

repeating the identical content in the same setting

Transform Vue.js into static HTML output

Peek into the Outlook Calendar Event's Source Code

Iterate through HTML content and utilize JavaScript along with Regular Expressions to substitute specific strings

Execute the function when the control becomes visible

In the game of rock paper scissors, the icons become unclickable once you achieve a score of 5

Incorporate a sleek Vueitfy user interface seamlessly into your current website

`Certain browsers are experiencing issues with text overlay functionality.`

Encountering issues with basic login functionality using Node.js and MongoDB - receiving a "Cannot

Place in the Middle of a Bootstrap Container

Elevate Your Designs: A New Perspective on Vertical Alignment

An exclusive execution of the JavaScript function is ensured

The layout option is not specified within the ejs-mate package

Issue with Internet Explorer 7: Floating elements are incorrectly positioned below their intended placement

When a textarea contains a new line, it will automatically add an additional row and expand the size of the textarea

Enhance Your List with Icon Decorations