skip to Main Content

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

Example 2:

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!

2

Answers


  1. 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;
    }
    

  2. 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;
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search