Html Question posted in
Some basic documentation can be found here.

Html – How to align <div> containers based on border position and midline?

I am trying to create a bracket for a sports tournament in HTML and CSS (using JS later to be able to interact with it).

So far my concept is to use containers with only the top, bottom, and right-side borders to create this effect. I apologize for the crudeness, but something like this (the solid lines are solid borders and the dashed lines are borders that are not present). However, I am not able to find how to align the containers with each other the way I want.

How do you align containers by their borders and midlines? (align the top border of one div container in-line with the horizontal midline of another container)

So far I have asked lady Google a bunch, poked around Stack Overflow, and read MDN resources, but I cannot find anything that fits with my problem.

The next thing I am going to try is using a bunch of containers to get the positions I want by stacking them to fit, but I feel like that is going to get messy quickly, so I figured I would see if there are any better solutions out there.

Any nudge in the right direction/similar post or online resource/advice/fix would be greatly appreciated 🙂

Tags:

2

Answers


  1. 0

    you can use postion top right left etc and margin also to align divs where u want

    Login or Signup to reply.
  2. 0

    I come up with something like this! Hope this helps. It will auto adjust depending on the items in columns. I also added placeholders where the team names probably will be

    .team-name {
  background: red;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(50%, -50%);
}

.path.root {
  border: solid calc(var(--border-width) / 2) black;
  height: 0;
}

.path {
  --border-width: 4px;
  height: 50%;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  width: 100%;
  border: solid var(--border-width) black;
  border-left: none;
  box-sizing: border-box;
}

.path-content {
  height: 100%;
  width: 100%;
  position: relative;
}

.wrapper {
  height: 400px;
  width: 100%;
  position: relative;
  display: flex;
}

.col {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.col>div {
  flex: 1;
  position: relative;
}
    <div class="wrapper">
  <div class="col">
    <div>
      <div class="path"></div>
    </div>
    <div>
      <div class="path"></div>
    </div>
    <div>
      <div class="path"></div>
    </div>
    <div>
      <div class="path"></div>
    </div>
  </div>
  <div class="col">
    <div>
      <div class="path">
        <div class="path-content">
          <div class="team-name">Team 1</div>
        </div>
      </div>
    </div>
    <div>
      <div class="path">
        <div class="path-content">
          <div class="team-name">Team 2</div>
        </div>
      </div>
    </div>
  </div>
  <div class="col">
    <div>
      <div class="path"></div>
    </div>
  </div>
  <div class="col">
    <div>
      <div class="path root"></div>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search