0

In CSS, I'd like to have:

  • a single block element that's attached to the left side of the page
  • the remaining elements centered on the page (not centered relative to the remaining space)
  • If there isn't enough space for that layout, I'd like the 'centered' elements to be pushed to the right by the left element, not just overlap with it.

Is this possible without Javascript or @media queries with hardcoded sizes?

IanPudney
  • 5,941
  • 1
  • 24
  • 39
  • 1
    Can you show us what you have tried so far? – Ankit Apr 17 '23 at 03:47
  • One option: position-absolute the left element. This gets me the layout I want, but causes overlap if the layout doesn't work – IanPudney Apr 17 '23 at 03:54
  • Another option: flexbox with spacers, or margin-right: auto on the elements. This is almost correct, but centers the 'center' elements in the *remaining space*, not the center of the page. – IanPudney Apr 17 '23 at 03:54

1 Answers1

-1

To make the second block is right center of the page, you can do a "hack" to add 1 more block after that, then use flexbox with justify-content: space-between;.

However, the last requirement, I'm not sure whether any other solutions without using Javascript or media queries. In this example, I'm using @media cause I haven't come up with any better ideas instead.

You can play around with this Codepen.

.wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .box {
    min-width: 200px;
    padding: 12px;
    box-sizing: border-box;

    background-color: crimson;
    color: white;
    text-align: center;
    
    &.box--hide {
      background: none;
    }
  }
}

@media screen and (max-width: 660px) {
  .box--hide {
    display: none;
  }
}
<div class="wrapper">
  <div class="box">Block 1</div>
  <div class="box">Block 2</div>
  <div class="box box--hide"></div>
</div>
haptn
  • 650
  • 6
  • 11