CODEWITHSUNDEEP
htmlcss
Francis N
Francis N

Reputation: 137

How to make an inner div border expand to outer div

I've been stuck with this HTML/CSS problem that I cannot even begin to figure out how I would structure the code and was wondering if someone could help. I don't really need code but more an idea of an approach an structure.

So far I have this

+--------------------+
|       Outer div    |
|                    |
|                    |
|                    |
|+------------------+|
||  inner div       ||
||                  ||
|+------------------+|
+--------------------+

The outer div has no styling it all it's just a container. The inner div has styling around it to give it a border and padding to push in its contents. The inner div's border is also inline with the outer div, the above is just for illustration.

When I click something in the inner div I would like the border of the inner div to expand and fill up to the top and to the outer div like so:

+--------------------+
|+------------------+|
||    Outer div.    ||
||                  ||
||                  ||
||                  ||
||                  ||
||  inner div       ||
||                  ||
|+------------------+|
+--------------------+

The inner div's vertical positioning has not changed, but the border around it got pushed upwards to top such that the border appears to be around the outer div as if it's now one div.

An idea I had was to make the border an absolutely positioned div that can have it top set to 0 when expanded and set to the top of the inner div when normal but as it's absolute I don't know how to get it's top to align with the inner div which is in the layout.

How would you go about structuring the html/css for before and after. The trigger is unimportant for now.

Thanks

Update:

Upvotes: 0

Views: 1482

Answers (1)

TWS
TWS

Reputation: 56

For older browsers (without grid support) this can be a solution (paddings/position values are just examples to see some space around the content)

.outer {
  background: yellow;
  position: relative;
  padding: 10px;
}

.inner {
  position: relative;
}

.inner:before {
  content: '';
  border: 1px solid red;
  position: absolute;
  bottom: -10px;
  left: -10px;
  right: -10px;
  top: -10px;
}

.inner:focus {
  outline: 0;
  position: static;
}

.inner:focus:before {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255,0,0,.1);
}
<div class="outer">
  <p>Dolor sit amet...</p>
  <p>Dolor sit amet...</p>
  <div class="inner" tabindex="-1">
    lorem ipsum...
  </div>
</div>

For modern browsers u can use grid and an extra element for the border:

.outer {
  background: yellow;
  display: grid;
  grid-template: 'upper' 1fr
                 'lower' auto / 100%;
}

.upper-content {
  grid-area: upper;
  padding: 10px;
}

.lower-content {
  grid-area: lower;
  padding: 10px;
  outline: 0;
  cursor: pointer;
}

.border {
  pointer-events: none;
  grid-area: lower;
  border: 1px solid red;
}

.lower-content:focus + .border {
  background: rgba(255,0,0,.1);
  grid-row-start: 1;
}
<div class="outer">
  <div class="upper-content">
    <p>Dolor sit amet...</p>
    <p>Dolor sit amet...</p>
  </div>
  <div class="lower-content" tabindex="-1">
    lorem ipsum...
  </div>
  <div class="border"></div>
</div>

Unfortunately, you can not animate these solutions (or not so easy:/)

Upvotes: 1

Related Questions