CODEWITHSUNDEEP
htmlcss
d50org
d50org

Reputation: 83

How can I align divs with position:fixed side-by-side?

I need a way to get child divs with position:fixed to float left side-by-side. If one of the child divs is display:none, then the rest of the child divs move over.

position:fixed has them all overlapping even with display:inline-block or float:left.

And position:absolute and position:sticky moves them with their parent div.

Here is a gif of what I am attempting to do:

enter image description here

<div class="wrapper">
  <div class="parent-1">
    <div class="child-1">1</div>
  </div>
  <div class="parent-2">
    <div class="child-2">2</div>
  </div>
  <div class="parent-3">
    <div class="child-3">3</div>
  </div>
</div>

Upvotes: 0

Views: 52

Answers (1)

tacoshy
tacoshy

Reputation: 13012

position: fixed moved the element completely out of the flow and aligns them fixed to the viewport. Move position: fixed to the parent and align the child items in row by using flexbox on the parent.

var button = document.querySelector('button');
button.addEventListener('click', function() {
  document.querySelector('.parent-2').classList.toggle('d-none');
});
.wrapper {
  position: fixed;
  bottom: 0;
  display: flex;
}


/* for visualization purpose only */
[class*="parent-"] {
  width: 80px;
  padding: 5px;
  border: 2px dashed red;
}

.d-none {
  display: none;
}
<div class="wrapper">
  <div class="parent-1">
    <div class="child-1">1</div>
  </div>
  <div class="parent-2">
    <div class="child-2">2</div>
  </div>
  <div class="parent-3">
    <div class="child-3">3</div>
  </div>
</div>


<button>Click here to show/hide element 2</button>

Upvotes: 1

Related Questions