Why does CSS float: left change padding?

Question

I'm in the process of making a tournament bracket programmatically based on data from a database. In my PHP code, it sets the top padding for each match in order to place each match in the correct position so that it looks like a tournament bracket. Within each match there are two divs that each contain two divs. One for the players' name and handicap, and another for the players' score. In order to make it so that the divs for the player's names and scores were side by side, I added

.player_1 div {
    float: left;
}
.player_2 div {
    float: left;
}

to the CSS file, but when doing so, it messed up the padding I had set previously. Strangely, I've found that removing float: left for either one of the divs will fix the padding, but having both creates a problem.

PHP/HTML code:

";

            for($j = 1; $j <= pow(2, $rounds - $i); $j++) {

                $margin = 0;
                $margin_bottom = 0;
                if($j == 1) {

                    $margin = $margin_top;

                } else {

                    $margin = $margin_standard;

                }
                if($j == pow(2, $rounds - $i)) {

                    $margin_bottom = 40;

                }

                echo "
                          
                              
                              
                          
                          
                              
                              
                          
                      ";

            }

            $margin_top = $margin_standard + 3;
            $margin_standard = $margin_top * 2 + 40;

            echo "";

        }

    } else if($tournament['format'] == "Single Modified (Reverse Seeded)") {

        $rounds++;

    }else if($tournament['format'] == "Single Elimination (Seeded)") {

        $rounds++;

    }else if($tournament['format'] == "Single Elimination (Split Bracket)") {

        $rounds++;

    } else if($tournament['format'] == "Double Elimination") {

        $rounds++;

    }

    // Get ID numbers of all players in the tournament.
    $players = array();
    $query = "SELECT DISTINCT `winner_id` AS `id`
            FROM `matches`
            WHERE `tournament_id`=" . $_GET['id'] . 
            " UNION SELECT DISTINCT `loser_id` AS `id`
            FROM `matches`
            WHERE `tournament_id`=" . $_GET['id'] . 
            " ORDER BY `id` ASC;";
    $ids = mysqli_query($con, $query);
    while($row = mysqli_fetch_array($ids)) {
        if($row['id'] != 0) {
            array_push($players, array("id" => $row['id'], "name" => ""));
        }
    }

    // Get names of players based on their ID numbers.
    for($i = 0; $i < count($players); $i++) {
        $query = "SELECT `first_name`, `last_name`
                FROM `players`
                WHERE `id`=" . $players[$i]["id"] . ";";
        $players[$i]["name"] = mysqli_fetch_array(mysqli_query($con, $query))['first_name'] . 
        " " . mysqli_fetch_array(mysqli_query($con, $query))['last_name'];
    }

    // Retrieve match data
    $matches = array();
    $query = "SELECT *
            FROM `matches` 
            WHERE `tournament_id`=" . $_GET['id'] . ";";
    $match_data = mysqli_query($con, $query);

    while($row = mysqli_fetch_array($match_data)) {

        array_push($matches, array("winner_id" => $row['winner_id'], 
                "loser_id" => $row['loser_id'], 
                "winner_score" => $row['winner_score'], 
                "loser_score" => $row['loser_score'], 
                "winner_handicap" => $row['winner_elo'], 
                "loser_handicap" => $row['loser_elo'], 
                "spot" => $row['spot'], 
                "length" => $row['length'],
                "round" => $row['round'],
                "num" => $row['match_num'],
                "winner_side" => $row['winner_side']));

    }

}

mysqli_close($con);
?>

  

    
    Bracket

CSS file:

@CHARSET "ISO-8859-1";

.round {
    float: left;    
}

.match {
    margin-right: 50px;
}

.player_1 div {
    float: left;
}

.player_2 div {
    float: left;
}

.player {
    width: 160px;
    height: 20px;
    background: rgb(210,210,210);
    border: 2px solid red;
}

.score {
    width: 20px;
    height: 20px;
    background: rgb(210,210,210);
    border-top: 2px solid red;
    border-right: 2px solid red;
    border-bottom: 2px solid red;
    text-align: center;
}

.round .match:first-child {
    margin-top: 40px;
}

.player_1 .player {
    background: rgb(240,240,240);
    border-bottom-width: 0px;
}

.player_1 .score {
    background: rgb(240,240,240);
    border-bottom-width: 0px;
}

.loser {
    color: rgba(0,0,0,0.5);
}

Page Source:

Why does CSS float: left change padding?

Answers (1)

Related Questions