Need help witb this html css alignment

HTML-CSS
1

HI, this is my code and its from the lesson “learn html by creating a registration form”. i am building this personally now and will like to add a little spice.

i do not want the input block to be below the text, i want them all inlined and organised on the right side of the screen, please walk me through what i am missing. my code looks like this so far :point_down:

<!DOCTYPE html>

    <html lang="en">
        <head>'
            <meta charset="utf-8">
            <link rel="stylesheet" href="styles.css"/>
            <title>Registration Forms</title>
        </head>
            <body>
        <h1>Registration Forms</h1>  
        <P>please fill out this form with the required information</P>   

        <form>
            <fieldset class="details">
                <label for="first-name">Enter the First Name: <input type="text" name="first-name" id="first-name" required></label>
                <label for="last-name">Enter your Last Name: <input type="text" name="last-name" id="last-name" required></label>
                <label for="email">Enter your Email: <input type="email" name="email" id="email" required></label>
                <label for="password">Enter a New Password: <input type="password" name="password" id="password" required></label>


            </fieldset>



            <fieldset> Account type(required)
                <label for="personal"><input type="radio"name="account-type" id="personal">Personal </label>
                <label for="business"><input type="radio" name="account-type" id="business">Business</label>


            </fieldset>



            <fieldset>
                <label for="profile-picture">Upload a profile picture: <input type="file" id="profile-picture"></label>
                <label for="age">Input you age(Years): <Input type="number" min="13" max="120" id="age"></label>
                <label for="referrer">How did you hear about us? 
                    <select name="" id="referrer">   
                        <option value="0">(select one)</option>
                        <option value="1">freeCodeCamp News</option>
                        <option value="2">freeCodeCamp YouTube Channel</option>
                        <option value="3">freeCodeCamp Forum</option>
                        <option value="4">Other</option>
                    </select>    
                </label>
                <label for="bio">Provide a bio: <textarea id="bio" rows="3" cols="30" placeholder="type staff here.." > </textarea></label>

            </fieldset>


            <fieldset>
                <label for="inline"> <input type="checkbox" id="inline"> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/"> terms and conditions</label>

            </fieldset>

            <input type="submit" value="Submit">



        </form>        




            </body>
        
    </html>


label{display: block;
    margin: 1em;}

h1,p{text-align: center;}

body{
    background-color: rgb(6, 6, 65);
    color: white;
    border: 0 auto;
    margin: 0;
}

form{margin: 0 auto;
width: 60%;
max-width: 500px;
min-width: 300px;
padding-bottom: 2em;
}

input[type="file"]{padding: 1px 2px;
    border: 1px solid rgb(7, 7, 117);
    
}

textarea{border: 1px solid rgb(7, 7, 117);}

fieldset{border: none;

}

IMG_0096
IMG_0096866×897 62.3 KB

2

  • Put <input> outside of <label></label>.

  • Put <label> and the corresponding <input> in a <div> container.

  • Set the container as a flexbox

  • Set justify-content value to space-between

1 Like
3

to have that different behaviour, unnest the input from the label (and link them with a for attribute on the label and id on the input`), then you can align them however you want

1 Like
4

You could also use grid, but the size of the first column (the label text) would be a guesstimate and not based on an actual element size (because it is just text). However, it is unlikely that the label text would change much over time.

Example:

.details label {
  display: grid;
  grid-template-columns: 20ch 1fr;
}
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.