Bollate

HTML

[ANSWERED] html – Display block is not aligning my label elements above my input elements?

By

Nov 20, 2022 , ,

Solution 1 :

1.) Make the margin-lefton the label to be 15% (which is half of the rest of 100% full width minus 70% width of the inputelement).

2.) Add box-sizing: border-box to the ìnput`in order to include the left and right padding and the border in the 70% width calculation:

html, body {
  font-family: 'Nunito', sans-serif;
  scroll-behavior: smooth;
  overflow-x: hidden;
  background: linear-gradient(90deg, rgb(0, 104, 241), rgb(48, 52, 255));
}

/* ANCHORS */

.anchor-div {
  display: flex;
  justify-content: center;
  margin-top: 4%;
}

.anchor-btn {
  display: block;
  width: 40%;
  height: 10%;
  background:#fff;
  padding: 5px;
  text-align: center;
  border-radius: 5px;
  color: rgb(0, 119, 255);
  font-weight: bold;
  line-height: 25px;
  text-decoration: none;
}

a:hover {
  color: rgb(15, 15, 15);
}

/* MOVIE INPUTS AND FORMS */

.create-movie-form {
  display: flex;
  flex-direction: column;
  border-radius: 15px;
  margin: auto;
  font-family: 'Nunito', sans-serif;
  background-color: #fff;
  padding-bottom: 5%;
  padding-top: 3%;
  max-width: 95%;
}

label {
  display: block;
  width: 100%;
  margin-top: 6%;
  margin-left: 15%;
  font-size: 12px;
}

input {
  font-family: 'Nunito', sans-serif;
  border-radius: 3px;
  border: 1px rgb(216, 215, 215) solid;
  margin: 0 auto auto auto;
  padding: 2.5% 1.5%;
  width: 70%;
  box-sizing: border-box;
}

input:focus {
  border: 2px solid rgb(0, 0, 255);
}

/* BUTTONS */

button {
  font-family: 'Nunito', sans-serif;
  width: 43%;
  padding: 6px;
  border-radius: 5px;
  font-weight: bolder;
  font-size: 15px;
  background: rgb(0, 119, 255) ;
  border: solid 1px #fff;
  margin: 5% auto auto auto;
  color: #fff;
  letter-spacing: 1px;
}

/* MOVIE LIST */

#movie-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-template-rows: 1fr;
  grid-auto-rows: 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  column-gap: 1fr;
  row-gap: 1fr;
}

section {
  border: 2px #fff solid;
  border-radius: 5px;
  background: #fff;
  color: rgb(0, 119, 255);
  margin: 2%;
  padding: 2%;
  animation: 
    sectionSlideDown .5s ease-out,
    fadeIn .5s ease-in;
}

.id {
  margin-left: 2%;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="./css/main.css">
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600&display=swap" rel="stylesheet">
    <title>Document</title>
</head>
<body>
  <div id="notification"> 
    <btn id="close"> Close </btn>
  </div>

  <h3>Movie Reviews</h3>
   
  <div id="error-div"></div>

  <form class="create-movie-form" action="submit">
    <label for="title">Movie Title:</label>
    <input type="text" name="title" id="title" placeholder="Movie Title" />
    <label for="runtime">Movie Runtime:</label>
    <input type="text" name="runtime" id="runtime" placeholder="Runtime" />
    <label for="rating">Movie Rating:</label>
    <input type="text" name="rating" id="rating" placeholder="What's your rating for this movie?" />
    <label for="review">Movie Review:</label>
    <input type="text" name="review" id="review" placeholder="Write a review for this movie" />
    <button type="submit" id="create-btn">Create movie</button>
  </form>

  <script src="../node_modules/axios/dist/axios.min.js"></script>
  <script src="functions.js"></script>
  <script src="main.js"></script>
</body>
</html>

Solution 2 :

Try this out! Solution using CSS Flexbox

html, body {
  font-family: 'Nunito', sans-serif;
  scroll-behavior: smooth;
  overflow-x: hidden;
  background: linear-gradient(90deg, rgb(0, 104, 241), rgb(48, 52, 255));
}

/* ANCHORS */

.anchor-div {
  display: flex;
  justify-content: center;
  margin-top: 4%;
}

.anchor-btn {
  display: block;
  width: 40%;
  height: 10%;
  background:#fff;
  padding: 5px;
  text-align: center;
  border-radius: 5px;
  color: rgb(0, 119, 255);
  font-weight: bold;
  line-height: 25px;
  text-decoration: none;
}

a:hover {
  color: rgb(15, 15, 15);
}

/* MOVIE INPUTS AND FORMS */

.create-movie-form {
  display: flex;
  flex-direction: column;
  border-radius: 15px;
  margin: auto;
  font-family: 'Nunito', sans-serif;
  background-color: #fff;
  padding-bottom: 5%;
  padding-top: 3%;
  max-width: 95%;
}

label {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: 73%;
  margin-left: auto;
  margin-right: auto;
  padding: 3px;
  font-size: 12px;
}

input {
  font-family: 'Nunito', sans-serif;
  border-radius: 3px;
  border: 1px rgb(216, 215, 215) solid;
  margin: 0 auto auto auto;
  padding: 2.5% 1.5%;
  width: 70%;
}

input:focus {
  border: 2px solid rgb(0, 0, 255);
}

/* BUTTONS */

button {
  font-family: 'Nunito', sans-serif;
  width: 43%;
  padding: 6px;
  border-radius: 5px;
  font-weight: bolder;
  font-size: 15px;
  background: rgb(0, 119, 255) ;
  border: solid 1px #fff;
  margin: 5% auto auto auto;
  color: #fff;
  letter-spacing: 1px;
}

/* MOVIE LIST */

#movie-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-template-rows: 1fr;
  grid-auto-rows: 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  column-gap: 1fr;
  row-gap: 1fr;
}

section {
  border: 2px #fff solid;
  border-radius: 5px;
  background: #fff;
  color: rgb(0, 119, 255);
  margin: 2%;
  padding: 2%;
  animation: 
    sectionSlideDown .5s ease-out,
    fadeIn .5s ease-in;
}

.id {
  margin-left: 2%;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="./css/main.css"></link>
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600&display=swap" rel="stylesheet">
    <title>Document</title>
</head>
<body>
  <div id="notification"> 
    <btn id="close"> Close </btn>
  </div>

  <h3>Movie Reviews</h3>
   
  <div id="error-div"></div>

  <form class="create-movie-form" action="submit">
    <label for="title">Movie Title:</label>
    <input type="text" name="title" id="title" placeholder="Movie Title" />
    <label for="runtime">Movie Runtime:</label>
    <input type="text" name="runtime" id="runtime" placeholder="Runtime" />
    <label for="rating">Movie Rating:</label>
    <input type="text" name="rating" id="rating" placeholder="What's your rating for this movie?" />
    <label for="review">Movie Review:</label>
    <input type="text" name="review" id="review" placeholder="Write a review for this movie" />
    <button type="submit" id="create-btn">Create movie</button>
  </form>

  <script src="../node_modules/axios/dist/axios.min.js"></script>
  <script src="functions.js"></script>
  <script src="main.js"></script>
</body>
</html>

Solution 3 :

Try display:inline-block

<div style="display:inline-block;border:1px solid blue;">
  <div style="padding-right:1em;align:left;border:1px solid red;">label</div>
  <div style="padding-left:1em;text-align:right;border:1px solid green;">input</div>
</div>

I know: too many divs…

<span style="display:inline-block;border:1px solid blue;">
  <span style="padding-right:1em;align:left;border:1px solid red;">label</span><br>
  
  <span style="padding-left:1em;text-align:right;border:1px solid green;">input</span>
</span>

<span style="display:inline-block;border:1px solid blue;">
  <span style="padding-right:1em;align:left;border:1px solid red;">
    <label for="myInput">My input:</label>
  </span>
  <br>
  <span style="padding-left:1em;text-align:right;border:1px solid green;">
    <input id="myInput">
  </span>
</span>

Problem :

I want my label element to align directly above and to the left side my input element. So like a standard form, the label will be on the top left of the input element. I’ve tried using display: block on the label and on the input elements, I’ve tried using align content/items and using flexbox. Nothing is working so far.

This is my HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="./css/main.css"></link>
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600&display=swap" rel="stylesheet">
    <title>Document</title>
</head>
<body>
  <div id="notification"> 
    <btn id="close"> Close </btn>
  </div>

  <h3>Movie Reviews</h3>
   
  <div id="error-div"></div>

  <form class="create-movie-form" action="submit">
    <label for="title">Movie Title:</label>
    <input type="text" name="title" id="title" placeholder="Movie Title" />
    <label for="runtime">Movie Runtime:</label>
    <input type="text" name="runtime" id="runtime" placeholder="Runtime" />
    <label for="rating">Movie Rating:</label>
    <input type="text" name="rating" id="rating" placeholder="What's your rating for this movie?" />
    <label for="review">Movie Review:</label>
    <input type="text" name="review" id="review" placeholder="Write a review for this movie" />
    <button type="submit" id="create-btn">Create movie</button>
  </form>

  <script src="../node_modules/axios/dist/axios.min.js"></script>
  <script src="functions.js"></script>
  <script src="main.js"></script>
</body>
</html>

This is my CSS

html, body {
  font-family: 'Nunito', sans-serif;
  scroll-behavior: smooth;
  overflow-x: hidden;
  background: linear-gradient(90deg, rgb(0, 104, 241), rgb(48, 52, 255));
}

/* ANCHORS */

.anchor-div {
  display: flex;
  justify-content: center;
  margin-top: 4%;
}

.anchor-btn {
  display: block;
  width: 40%;
  height: 10%;
  background:#fff;
  padding: 5px;
  text-align: center;
  border-radius: 5px;
  color: rgb(0, 119, 255);
  font-weight: bold;
  line-height: 25px;
  text-decoration: none;
}

a:hover {
  color: rgb(15, 15, 15);
}

/* MOVIE INPUTS AND FORMS */

.create-movie-form {
  display: flex;
  flex-direction: column;
  border-radius: 15px;
  margin: auto;
  font-family: 'Nunito', sans-serif;
  background-color: #fff;
  padding-bottom: 5%;
  padding-top: 3%;
  max-width: 95%;
}

label {
  display: block;
  width: 100%;
  margin-top: 6%;
  margin-left: 10%;
  font-size: 12px;
}

input {
  font-family: 'Nunito', sans-serif;
  border-radius: 3px;
  border: 1px rgb(216, 215, 215) solid;
  margin: 0 auto auto auto;
  padding: 2.5% 1.5%;
  width: 70%;
}

input:focus {
  border: 2px solid rgb(0, 0, 255);
}

/* BUTTONS */

button {
  font-family: 'Nunito', sans-serif;
  width: 43%;
  padding: 6px;
  border-radius: 5px;
  font-weight: bolder;
  font-size: 15px;
  background: rgb(0, 119, 255) ;
  border: solid 1px #fff;
  margin: 5% auto auto auto;
  color: #fff;
  letter-spacing: 1px;
}

/* MOVIE LIST */

#movie-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-template-rows: 1fr;
  grid-auto-rows: 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  column-gap: 1fr;
  row-gap: 1fr;
}

section {
  border: 2px #fff solid;
  border-radius: 5px;
  background: #fff;
  color: rgb(0, 119, 255);
  margin: 2%;
  padding: 2%;
  animation: 
    sectionSlideDown .5s ease-out,
    fadeIn .5s ease-in;
}

.id {
  margin-left: 2%;
}

Thank you for any help!

Comments

Comment posted by Jason Pallone

This worked perfectly! Thank you so much! Quick question so you said we use the remaining 30% and half it to 15%, it works perfectly. But why is this? Why doesn’t 50% work? CSS is my weak spot so i’m always trying to learn more! Thanks again.

Comment posted by Tanner Dolby

@JasonPallone Because you already have

Comment posted by Jason Pallone

@TannerDolby Ok thanks! So in this instance, it’s 70% width for the input because that’s what i specified, then it’s 15% available width on each side of the input, because 30% overall width is left available?

By

Related Post

HTML

[ANSWERED] html – I can’t get my carousel buttons to respond bootstrap 4

Nov 20, 2022
HTML

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

Nov 20, 2022
HTML

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

Nov 20, 2022

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022