Html - Elements Appearing in Wrong Order or Overlapping

Yeonari
April 30, 2023
371 views
1 vote
2 Answers

I have a div for each image and select box, the div itself is relatively positioned while the select/labels are absolute positioned inside of the div. When I create a new input, a number box and label, it either goes over the images or on a line before them. I know I could manually move the label and the input but I want it to be more natural.

CSS:

div.player1Select, div.player2Select {
    display: inline-flex;
    position: relative;
    justify-content: center;
    width: 400px;
    height: 400px;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 10px;
    border-style: double;
    border-color: black;
    border-width: 8px;
    border-radius: 5%;
}

#player1Img, #player2Img {
    height: 400px;
    width: auto;
}

#readyButton {
    animation: color-change 2.5s infinite;
    font-size: 200%;
    font-weight: bolder;
    box-shadow: 0 0 20px 0 black;
    display: inline-block;
    position: absolute;
    left: 40%;
    right: 40%;
    bottom: 5%;
    height: 50px;
}

.player2Select { float: right; right: 20%;}

.player1Select { float: left; left: 20%;}

label { position: absolute; white-space: nowrap; align-self: flex-end; left: 24%; clear: both; }

#player1Model, #player2Model {
    position: absolute;
    align-self: flex-end;
    width: 25%;
    right: 24%;
}

.trackLength {
    float: left;
    display: inline-flex;
    position: sticky;
}

HTML:

<form>
    <div class="player1Select">
        <img src="carselect1.gif" id="player1Img" alt="car">
        <label for="player1Model">Player 1 Model: </label>
        <select id="player1Model">
            <option value="car">Car</option>
            <option value="horse">Horse</option>
            <option value="rocket">Rocket</option>
        </select>
    </div>

    <div class="player2Select">
        <img src="carselect2.gif"id="player2Img" alt="car">
        <label for="player2Model">Player 2 Model: </label>
        <select id="player2Model">
            <option value="car">Car</option>
            <option value="horse">Horse</option>
            <option value="rocket">Rocket</option>
        </select>
    </div>
    
    <div class="trackLength">
        <label for="trackInput">Track Length: </label>
        <input type="number" id="trackInput">
    </div>

    <input type="submit" value="Ready" id="readyButton" name="readyButton">
</form>

Original Issue:

Example 2:

Additionally, the label does not respect the input number box. If I use a div to position them, the label will go over the number box, as seen in the image. The only way I was able to fix this, as I did in the select lists, was after them overlapping in the center I manually moved the label and select box away from each other with absolute positioning, but it doesn’t feel natural. Is there any other way to do this? Thanks!

Tags: css html

Answers

Chosen as BEST ANSWER

Putting the inputs and labels into a shared parent class attributes under the "master class" wrapper, who's height is auto and able to expand, I made the attributes class position itself at the bottom using absolute positioning.

Inline-Flex allows the contents of the attributes class to be on the same line.

Link to the resulting image: https://imgur.com/a/HOrCqij

HTML:

        <form>
            <div class="wrapper">
                <div class="player1Content">
                    <img src="Assets/Player1/carselect1.gif" id="player1Img" alt="car">
                    <div class="player1Select">
                        <label for="player1Model">Player 1 Model: </label>
                        <select id="player1Model">
                            <option value="car">Car</option>
                            <option value="horse">Horse</option>
                            <option value="rocket">Rocket</option>
                        </select>
                    </div>
                </div>

                <div class="player2Content">
                    <img src="Assets/Player2/carselect2.gif"id="player2Img" alt="car">
                    <div class="player2Select">
                        <label for="player2Model">Player 2 Model: </label>
                        <select id="player2Model">
                            <option value="car">Car</option>
                            <option value="horse">Horse</option>
                            <option value="rocket">Rocket</option>
                        </select>
                    </div>
                </div>

                <div class="attributes">
                    <div class="trackLength">
                        <label for="trackInput">Track Length: </label>
                        <input type="number" id="trackInput">
                    </div>
    
                    <div class="minSpeed">
                        <label for="minSpeedInput">Player Min Speed: </label>
                        <input type="number" id="minSpeedInput">
                    </div>
                    
                    <div class="maxSpeed">
                        <label for="maxSpeedInput">Player Max Speed: </label>
                        <input type="number" id="maxSpeedInput">
                    </div>
                </div>
            </div>

            <input type="submit" value="Ready" id="readyButton" name="readyButton">
        </form>

CSS:

div.wrapper {
    position: relative;
    display: inline-flex;
    justify-content: center;
    width: 100%;
    height: auto;
    align-items: center;
    margin-top: auto;
    margin-bottom: 50px;
    margin-left: auto;
    margin-right: auto;
}

.player1Content, .player2Content {
    position: relative;
    width: 400px;
    height: 400px;
}

div.player1Select, div.player2Select {
    width: max-content;
    margin: auto;
    margin-bottom: 30px;
}

div.attributes {
    width: 50%;
    position: absolute;
    bottom: 0;
    display: inline-flex;
    justify-content: space-between;
}

#player1Img, #player2Img {
    height: 300px;
    max-width: 600px;
    display: block;
    margin: auto;
}

(Edit)

You can try this code:

<form>
    <div class="cars">
        <div class="player1Select">
            <img src="carselect1.gif" id="player1Img" alt="car"><br>
            <label for="player1Model">Player 1 Model: </label>
            <select id="player1Model">
                <option value="car">Car</option>
                <option value="horse">Horse</option>
                <option value="rocket">Rocket</option>
            </select>
        </div>
    
        <div class="player2Select">
            <img src="carselect2.gif"id="player2Img" alt="car"><br>
            <label for="player2Model">Player 2 Model: </label>
            <select id="player2Model">
                <option value="car">Car</option>
                <option value="horse">Horse</option>
                <option value="rocket">Rocket</option>
            </select>
        </div>
    </div>
    
    <div class="trackLength">
        <label for="trackInput">Track Length: </label>
        <input type="number" id="trackInput">
    </div>

    <input type="submit" value="Ready" id="readyButton" name="readyButton">
</form>

CSS:

div.player1Select, div.player2Select {
    text-align: center;
    width: 400px;
    height: 400px;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 10px;
    border-style: double;
    border-color: black;
    border-width: 8px;
    border-radius: 5%;
}

#player1Img, #player2Img {
    height: 300px;
    width: auto;
}

#readyButton {
    animation: color-change 2.5s infinite;
    font-size: 200%;
    font-weight: bolder;
    box-shadow: 0 0 20px 0 black;
    display: inline-block;
    position: absolute;
    left: 40%;
    right: 40%;
    bottom: 5%;
    height: 50px;
}

label { white-space: nowrap; align-self: flex-end; left: 24%; clear: both; }

#player1Model, #player2Model {
    align-self: flex-end;
    width: 25%;
    right: 24%;
}

.cars {
    display: flex;
}

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Elements Appearing in Wrong Order or Overlapping

Answers