Tournament Brackets - Lines & Spaces

Question

What I'm trying to create is a dynamic Tournament site that can be scaled to any size but using as little code as possible.

First round (of games): I have the first round up and running, and it's flexible for any size and it will look good no matter what I do with it.

Secound round: This is where the problem starts, because of my solution for the lines connecting all the games. The lines are simulated by the div classes .line-top & .line-bottom. However, since there are less games in round 2, and a bigger space between the games, the same line code can't be applied to every set of game in round 2. The first works fine, as you can see in the example, except for the line connecting them, which is also a problem. If I add another set of games in round 2 the code breaks, since there is need for a bigger space than the space that is above the first game. It needs the same space as between game 1 & game 2 in round 2. Check example and you will see what I mean.

To my real problem: How do I create a dynamic site that will adept depending on the amount of players that are in the tournament? And mainly, how do I deal with the lines? I need a line before every box, as well as fixing the space that is needed before game 3, and any other game that is added. The same problems will occur when I add a round 3 and a round 4 and so forth. The MAIN problem I guess is making the lines that connects the boxes, the horizontal ones, not the vertical ones. Now the boxes just lay ontop. There should be a horizontal line on the left of very box.

Is my approach to the problem already wrong? Is there a better solution for my lines and how I create the space above and below my games?

Site can be found here: http://jsfiddle.net/UZs4s/

HTML

    <div class="navbar navbar-inverse navbar-static-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Tournament</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="round-1">
            <div class="game">
                <div class="contender-1">
                x
                </div>
                <div class="contender-2">
                x
                </div>
            </div>
            <div class="line-top"></div>
            <div class="game">
                <div class="contender-1">
                x
                </div>
                <div class="contender-2">
                x
                </div>
            </div>
            <div class="line-bottom"></div>
            <div class="game">
                <div class="contender-1">
                x
                </div>
                <div class="contender-2">
                x
                </div>
            </div>
            <div class="line-top"></div>
            <div class="game">
                <div class="contender-1">
                x
                </div>
                <div class="contender-2">
                x
                </div>
            </div>
            <div class="line-bottom"></div>
            <div class="game">
                <div class="contender-1">
                x
                </div>
                <div class="contender-2">
                x
                </div>
            </div>
            <div class="line-top"></div>
            <div class="game">
                <div class="contender-1">
                x
                </div>
                <div class="contender-2">
                x
                </div>
            </div>
            <div class="line-bottom"></div>
        </div>

        <div class="round-2">
            <div class="game">
                <div class="contender-1">
                x
                </div>
                <div class="contender-2">
                x
                </div>
            </div>
            <div class="line-top"></div>
            <div class="game">
                <div class="contender-1">
                x
                </div>
                <div class="contender-2">
                x
                </div>
            </div>
            <div class="line-bottom"></div>
<div class="game">
                <div class="contender-1">
                x
                </div>
                <div class="contender-2">
                x
                </div>
            </div>
            <div class="line-top"></div>
        </div>
    </div>

CSS

.contender-1,
.contender-2 {
    font-family: Arial, sans-serif;
    font-size: 12px;
    width: 120px;
    border: 1px solid #000;
    padding-left: 2px;
    background-color: #f1f1f1;
}

.contender-1 {
    border-bottom: 0px;
}

.game {
    margin-bottom: 16px;
    float: left;
    clear: both;
}

.round-1 .line-top {
    float: left;
    height: 35px;
    width: 10px;
    border-right: 1px solid #000;
    margin-top: 18px;
    border-top: 1px solid #000;
}

.line-bottom {
    float: left;
    height: 19px;
    width: 10px;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
}

.round-1 {
    float: left;
}

.round-2 {
    float: left;
    margin-top: 26px;
}

.round-2 .line-top {
    float: left;
    height: 85px;
    width: 10px;
    border-right: 1px solid #000;
    margin-top: 18px;
    border-top: 1px solid #000;
}

Have you checked out previous StackOverflow questions about this yet, such as [this](http://stackoverflow.com/questions/262022/html-to-create-tournament-final-four-bracket)? — Irvin Zhan, Feb 24 '14 at 22:59
+1 For trying this with `HTML` but have you considered [`SVG`](http://upload.wikimedia.org/wikipedia/commons/8/84/Periodic_table.svg)? — Jonathan, Feb 24 '14 at 23:10
I tried adding a new div for a centerline to attach horizontally to the boxes. This causes problems with float and clear that I can't fix. — user3348360, Feb 24 '14 at 23:12
http://jsfiddle.net/UZs4s/2/ contains a new version with the class line-center added. I can not get it to appear before the box though. All these clears and floats are confusing me. — user3348360, Feb 24 '14 at 23:30

score 1 · Accepted Answer · answered Feb 25 '14 at 12:11

http://jsfiddle.net/coma/AwrZq/22/

http://caniuse.com/#feat=flexbox

div.tournament {
    display: flex;
    flex-direction: row;
}

div.tournament > div {
    flex: 1;
}

div.tournament > div > div {
    position: relative;
}

div.tournament > div + div {
    flex: 1;
    display: flex;
    flex-flow: column;
    padding-left: 20px;
}

div.tournament > div:first-child > div + div {
    padding-top: 10px;
}

div.tournament > div + div > div {
    flex: 1;
    display: flex;
    flex-flow: row wrap;
    align-content: center;
}

div.tournament > div > div + div:after {
    content: "";
    position: absolute;
    bottom: 50%;
    right: -10px;
    width: 1px;
    height: 100%;
    background-color: #333;
}

div.tournament > div:first-child > div + div:after {
    height: 62px;
    bottom: 25px;
}

div.tournament > div > div > ul {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #333;
    width: 100%;
}

div.tournament > div > div > ul:after {
    content: "";
    position: absolute;
    top: 50%;
    left: -11px;
    right: -10px;
    height: 1px;
    background-color: #333;
}

div.tournament > div:first-child > div > ul:after {
    left: 0;
    right: -9px;
}

div.tournament > div:last-child > div > ul:after {
    right: 0;
}

div.tournament > div > div > ul > li {
    font-size: 15px;
    line-height: 1em;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 5px;
    background-color: #ccc;
}

div.tournament > div > div > ul > li:before {
    content: "X";
}

score 0 · Answer 2 · answered Feb 25 '14 at 05:02

I would suggest using relative positioning, absolute positioning, and z-index to position the bracket fields above brackets. This way the fields can slide left and right along the connecting lines. I also would say that the bracket should be stacked on top of each other when viewed in portrait mode on smartphones as one has to pinch and zoom in to view an entire bracket.

Tournament Brackets - Lines & Spaces

2 Answers2