Adjust div according to inner divs

user_7466293 0
Viewed 517

I have a set of divs going left and down, like a staircase. Maybe There's a better way for doing it, but I got it.

Now I would like to have a div around all these "stairs". something like this: IMAGE

Notice that these stairs start kind of in middle (horizontally) in the page. How can I make this outer div according to these number of stairs without having to type the height and width?

Another important note is that sometimes there are only 4 steps, which means the outter div really has to adjust according to displayed divs.

Here you have a small plunker if you want to check it out:

PLUNKER

Here's the css stylesheet with the above mentioned "stairs"

.box1 {
  text-align: center;
  border: 1px solid #eaeaea;
  border-radius: 2px;
  margin-left: 30%;
  width: 8%;
  height: 40px;
}

.box2 {
  text-align: center;
  margin-left: 38%;
  border: 1px solid #eaeaea;
  border-radius: 2px;
  width: 8%;
  height: 40px;
}

.box3 {
  text-align: center;
  margin-left: 46%;
  border: 1px solid #eaeaea;
  border-radius: 2px;
  width: 8%;
  height: 40px;
}

.box4 {
  text-align: center;
  margin-left: 54%;
  border: 1px solid #eaeaea;
  border-radius: 2px;
  width: 8%;
  height: 40px;
}

.box5 {
  text-align: center;
  margin-left: 62%;
  border: 1px solid #eaeaea;
  border-radius: 2px;
  width: 8%;
  height: 40px;
}

.box6 {
  text-align: center;
  margin-left: 70%;
  border: 1px solid #eaeaea;
  border-radius: 2px;
  width: 8%;
  height: 40px;
}
<div class="boxContainer">
  <div class="row box1">
    hello 1
  </div>
  <div class="row box2">
    hello 2
  </div>
  <div class="row box3">
    hello 3
  </div>
  <div class="row box4">
    hello 4
  </div>
  <div class="row box5">
    hello 5
  </div>
  <div class="row box6">
    hello 6
  </div>
</div>

css html
3 Answers

I don't know if I'm fully understanding your problem. Do you mean something like this?

* {
  box-sizing: border-box;
}

.boxContainer {
  border-radius: 5px;
  border: 3px solid black;
  padding: 5px 5px 5px 30px; /* Approach to OP's image */
  --steps: 6;
}

.box {
  --size: calc(100% / var(--steps));
  border: 1px solid black;
  width: var(--size);
  height: 40px;
  text-align: center;
  position: relative;

}

.box:nth-child(2) {
  left: var(--size);
}

.box:nth-child(3) {
  left: calc(2 * var(--size));
}

.box:nth-child(4) {
  left: calc(3 * var(--size));
}

.box:nth-child(5) {
  left: calc(4 * var(--size));
}

.box:nth-child(6) {
  left: calc(5 * var(--size));
}
<div class="boxContainer">
  <div class="row box">
    hello 1
  </div>
  <div class="row box">
    hello 2
  </div>
  <div class="row box">
    hello 3
  </div>
  <div class="row box">
    hello 4
  </div>
  <div class="row box">
    hello 5
  </div>
  <div class="row box">
    hello 6
  </div>
</div>

I've used a Custom Property (a.k.a. CSS variable) --steps so you can define how many steps will be in the boxContainer.

This way, if you only have 4 boxes inside the container you could overwrite this variable inline, like:

<div class="boxContainer" style="--steps: 4">

And everything would fit without any other changes on the CSS.

You can use JS to do this change or, if you're using some server-side language to generate the markup, it's even easier... e.g. in PHP:

<?php $boxes = ['hello 1', 'hello 2', 'hello 3', 'hello 4']; ?>
<div class="boxContainer" style="--steps: <?= count($boxes) ?>">
<?php foreach ($boxes as $box): ?>
    <div class="row box"><?= $box ?></div>
<?php endforeach ?>
</div>
user_15347040

It's kinda messy, but you could try this:

.row {
  border: 1px solid black;
  width: 80px;
  height: 25px;
  position: absolute;
  left: 100%;
  top: 100%;
}

.boxContainer {
  position: relative;
  display: inline-block;
}

.wrapper {
  position: relative;
}
<div class="boxContainer">
    <div class="row box1">
      <div class="wrapper">
        hello 1
      </div>
      <div class="row">
          <div class="wrapper">
            hello 2
          </div>
          <div class="row">
            <div class="wrapper">
              hello 3
            </div>
              <div class="row">
                <div class="wrapper">
                  hello 4
                </div>
              </div>
          </div>
      </div>
    </div>
</div>

This plays with the way position absolute and relative works.

user_65541210

You may try this:

.boxContainer{
  border: solid 2px #000;
  border-radius: 8px;
  padding: 10px;
}

.box1 {
  text-align: center;
  border: 1px solid #eaeaea;
  border-radius: 2px;
  margin-left: 30%;
  width: 8%;
  height: 40px;
}

.box2 {
  text-align: center;
  margin-left: 38%;
  border: 1px solid #eaeaea;
  border-radius: 2px;
  width: 8%;
  height: 40px;
}

.box3 {
  text-align: center;
  margin-left: 46%;
  border: 1px solid #eaeaea;
  border-radius: 2px;
  width: 8%;
  height: 40px;
}

.box4 {
  text-align: center;
  margin-left: 54%;
  border: 1px solid #eaeaea;
  border-radius: 2px;
  width: 8%;
  height: 40px;
}

.box5 {
  text-align: center;
  margin-left: 62%;
  border: 1px solid #eaeaea;
  border-radius: 2px;
  width: 8%;
  height: 40px;
}

.box6 {
  text-align: center;
  margin-left: 70%;
  border: 1px solid #eaeaea;
  border-radius: 2px;
  width: 8%;
  height: 40px;
}
<div class="boxContainer">
  <div class="row box1">
    hello 1
  </div>
  <div class="row box2">
    hello 2
  </div>
  <div class="row box3">
    hello 3
  </div>
  <div class="row box4">
    hello 4
  </div>
  <div class="row box5">
    hello 5
  </div>
  <div class="row box6">
    hello 6
  </div>
</div>

user_81122770
Related