0

Here is the HTML and CSS I'm working with: 

html {
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
  padding: 20px;
}

.container {
  display: flex;
}

.horizontal {
  flex-direction: row;
  width: 100%;
  height: 100%;
}

.vertical {
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.horizontal>.container {
  border-style: solid;
  border-width: 0 2px 0 0;
  padding: 0 5px 0 0;
  margin: 0 5px 0 0;
}

.vertical>.container {
  border-style: solid;
  border-width: 0 0 2px 0;
  padding: 0 0 5px 0;
  margin: 0 0 5px 0;
}

.window {
  background: green;
  width: 100%;
  height: 100%;
}
<div class='container horizontal'>
  <div class='container vertical'>
    <div class='container horizontal'>
      <div class='container horizontal'>
        <div class='window'>1</div>
      </div>
      <div class='container horizontal'>
        <div class='window'>2</div>
      </div>
    </div>
    <div class='container horizontal'>
      <div class='container horizontal'>
        <div class='window'>3</div>
      </div>
      <div class='container horizontal'>
        <div class='window'>4</div>
      </div>
    </div>
  </div>
  <div class='container vertical'>
    <div class='container horizontal'>
      <div class='window'>5</div>
    </div>
    <div class='container horizontal'>
      <div class='window'>6</div>
    </div>
  </div>
</div>

Context: This is a mock-up of a proposed design for a tiling window manager. The idea is that the line adjacent to each container represents a 'cursor' where a new window will be inserted when that container is selected and the 'create window' command is given. At any time, only the cursor for the currently selected container would be visible.

I'd like the vertical border to the right of window 2 to sit directly atop the vertical border to the left of windows 5 and 6. This should be achieved without any change to the horizontal line below windows 1 and 2 --- that is, the right edge of window 2 should line up with the right endpoint of the horizontal line below windows 1 and 2.

Here is a diagram of the desired effect:

diagram of desired effect

This needs to be implemented in html and css, and should work for any structure of nested containers (with the constraint that horizontal containers may contain only multiple vertical containers or a single window, and vertical containers may contain only multiple horizontal containers or a single window).

It seems I'd be able to achieve this with negative padding (applied to the right of horizontal containers and the bottom of vertical containers), if there were such a thing. Is there a work-around?

user2846495
  • 149
  • 2
  • 6
  • This was closed for a very stupid reason. I was about to post my answer, but you can use `div:after:hover { content: ''; display: block; position: absolute; top: 0; right: -5px; bottom: 0; background: red; width: 2px }` – Tallboy May 21 '20 at 14:44
  • I understand why it was closed. But while the title of the question is a duplicate, the body of the question contains a specific application (which is not a duplicate). I was hoping that someone might be able to provide a work-around specific to the application, if the answer to the question in the title happens to be 'no'. – user2846495 May 21 '20 at 14:49
  • If I change the title to something like "How do I achieve this effect with HTML and CSS?" will it be re-opened? – user2846495 May 21 '20 at 15:11
  • @user2846495 No; I did read the question again more closely, and while you may actually want to achieve something different and just happened to word the request poorly, the effect you really want is still a subject that's already been covered here. I'll adjust the dupes momentarily. Regarding the body of the question being a different application, all Qs tend to have different code in some way than a target dupe; it's the method and the desired affect that are what's duplicated. – TylerH May 21 '20 at 15:38
  • @TylerH Right, I understand. Thanks for your patience; I'm still a bit new to asking questions on this site. – user2846495 May 21 '20 at 15:49
  • @user2846495 No worries, it is not an easy thing to ask a question that complies with every expectation of Stack Overflow. And it doesn't help that the in-site search function sucks horribly. As a general rule it is recommended to search for whatever you want with the `site:stackoverflow.com` filter at the end of your search string on Google, rather than searching here. – TylerH May 21 '20 at 15:59

0 Answers0