Tips on aligning objects within div elements

Question

Tips on aligning objects within div elements

I am currently in the process of learning how to create websites.

Below is the body tag of my website:

<body>
    <h1 id="title">Title</h1>

    <div id="loginContainer">

        <img id="usernameIcon" src="assets/images/usernameIcon.png" alt="">
        <input id="usernameInput" type="text">

        <img id="passwordIcon" src="assets/images/passwordIcon.png" alt="">
        <input id="passwordInput" type="password">

        <button id="loginButton">Sign in</button>
    </div>
</body>

Here is a snippet from my CSS file:

#title {
    color: black;
    text-align: center;
    letter-spacing: 1px;
    font-weight: bold;
}

#loginContainer{
    width: 60%;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 80px;
    background-color: white;
    border-radius: 20px;
    box-shadow: 10px 10px 72px -26px rgba(0,0,0,0.75);
}
...

... (remaining CSS code)

In an attempt to adjust the layout, I added margin-top: 150px; to the #passwordInput element in the CSS file. This resulted in a change of position for all UI elements on the site. I am seeking assistance and would appreciate any guidance you can offer as I continue to learn about website development and design.

html css position css-position

Answer 1

Answer №1

When all elements are contained within the same div, it will expand when any of the elements receive a margin.

To avoid this issue, try using position: relative and top: 150px

#passwordInput {
  position: relative;
  top: 150px;
}

Answer 2

When all elements are contained within the same div, it will expand when any of the elements receive a margin.

To avoid this issue, try using position: relative and top: 150px

#passwordInput {
  position: relative;
  top: 150px;
}

Answer 3

Answer №2

After making some adjustments to the HTML and CSS, I believe the design should now function correctly. You can view the updated code on CodePen.

#title {
  color: black;
  text-align: center;
  letter-spacing: 1px;
  font-weight: bold;
  font-family: sans-serif;
}

#loginContainer {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 80px;
  background-color: white;
  border-radius: 20px;
  box-shadow: 10px 10px 72px -26px rgba(0, 0, 0, 0.75);
  box-sizing: border-box;
  padding: 125px 0 50px;
}

#usernameIcon,
#passwordIcon {
  width: 30px;
  height: 30px;
  position: relative;
  top: 10px;
  margin-right: 15px;
}

#usernameInput,
#passwordInput {
  width: 30%;
  height: 30px;
}

#passwordInput:focus-within {}

#loginButton {
  width: 40%;
  height: 40px;
  border-radius: 15px;
  border-width: 0;
  background-color: green;
  margin-top: 150px;
  margin-left: 30%;
  margin-right: 30%;
}

.wraper {
  outline: 1px solid red;
  width: 40%;
  margin: 0 auto;
}


/* input-group */

.input-group {
  overflow: hidden;
  text-align: center;
}

<body>
  <h1 id="title">Title</h1>

  <form id="loginContainer">
    <div class="input-group">
      <img id="usernameIcon" src="https://ya-webdesign.com/images600_/vector-login-username-1.png" alt="">
      <input id="usernameInput" type="text">
    </div>
    <div class="input-group">
      <img id="passwordIcon" src="https://ya-webdesign.com/images600_/password-icon-png-2.png" alt="">
      <input id="passwordInput" type="password">
    </div>

    <button id="loginButton">Sign in</button>
  </form>
</body>

Answer 4

After making some adjustments to the HTML and CSS, I believe the design should now function correctly. You can view the updated code on CodePen.

#title {
  color: black;
  text-align: center;
  letter-spacing: 1px;
  font-weight: bold;
  font-family: sans-serif;
}

#loginContainer {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 80px;
  background-color: white;
  border-radius: 20px;
  box-shadow: 10px 10px 72px -26px rgba(0, 0, 0, 0.75);
  box-sizing: border-box;
  padding: 125px 0 50px;
}

#usernameIcon,
#passwordIcon {
  width: 30px;
  height: 30px;
  position: relative;
  top: 10px;
  margin-right: 15px;
}

#usernameInput,
#passwordInput {
  width: 30%;
  height: 30px;
}

#passwordInput:focus-within {}

#loginButton {
  width: 40%;
  height: 40px;
  border-radius: 15px;
  border-width: 0;
  background-color: green;
  margin-top: 150px;
  margin-left: 30%;
  margin-right: 30%;
}

.wraper {
  outline: 1px solid red;
  width: 40%;
  margin: 0 auto;
}


/* input-group */

.input-group {
  overflow: hidden;
  text-align: center;
}

<body>
  <h1 id="title">Title</h1>

  <form id="loginContainer">
    <div class="input-group">
      <img id="usernameIcon" src="https://ya-webdesign.com/images600_/vector-login-username-1.png" alt="">
      <input id="usernameInput" type="text">
    </div>
    <div class="input-group">
      <img id="passwordIcon" src="https://ya-webdesign.com/images600_/password-icon-png-2.png" alt="">
      <input id="passwordInput" type="password">
    </div>

    <button id="loginButton">Sign in</button>
  </form>
</body>

Answer 5

Answer №3

I have made adjustments to the HTML and CSS to achieve the desired design. I'm confident that it will function properly. You can find the code on codepen

#title {
  color: black;
  text-align: center;
  letter-spacing: 1px;
  font-weight: bold;
  font-family: sans-serif;
}

#loginContainer {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 80px;
  background-color: white;
  border-radius: 20px;
  box-shadow: 10px 10px 72px -26px rgba(0, 0, 0, 0.75);
  box-sizing: border-box;
  padding: 125px 0 50px;
}

#usernameIcon,
#passwordIcon {
  width: 30px;
  height: 30px;
  position: relative;
  top: 10px;
  margin-right: 15px;
}

#usernameInput,
#passwordInput {
  width: 30%;
  height: 30px;
}

#passwordInput:focus-within {}

#loginButton {
  width: 40%;
  height: 40px;
  border-radius: 15px;
  border-width: 0;
  background-color: green;
  margin-top: 120px;
  margin-left: 30%;
  margin-right: 30%;
}

.wraper {
  outline: 1px solid red;
  width: 40%;
  margin: 0 auto;
}


/* input-group */

.input-group {
  overflow: hidden;
  text-align: center;
  margin-bottom: 15px;
}

<body>
  <h1 id="title">Title</h1>

  <form id="loginContainer">
    <div class="input-group">
      <img id="usernameIcon" src="https://ya-webdesign.com/images600_/vector-login-username-1.png" alt="">
      <input id="usernameInput" type="text">
    </div>
    <div class="input-group">
      <img id="passwordIcon" src="https://ya-webdesign.com/images600_/password-icon-png-2.png" alt="">
      <input id="passwordInput" type="password">
    </div>

    <button id="loginButton">Sign in</button>
  </form>
</body>

Answer 6

I have made adjustments to the HTML and CSS to achieve the desired design. I'm confident that it will function properly. You can find the code on codepen

#title {
  color: black;
  text-align: center;
  letter-spacing: 1px;
  font-weight: bold;
  font-family: sans-serif;
}

#loginContainer {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 80px;
  background-color: white;
  border-radius: 20px;
  box-shadow: 10px 10px 72px -26px rgba(0, 0, 0, 0.75);
  box-sizing: border-box;
  padding: 125px 0 50px;
}

#usernameIcon,
#passwordIcon {
  width: 30px;
  height: 30px;
  position: relative;
  top: 10px;
  margin-right: 15px;
}

#usernameInput,
#passwordInput {
  width: 30%;
  height: 30px;
}

#passwordInput:focus-within {}

#loginButton {
  width: 40%;
  height: 40px;
  border-radius: 15px;
  border-width: 0;
  background-color: green;
  margin-top: 120px;
  margin-left: 30%;
  margin-right: 30%;
}

.wraper {
  outline: 1px solid red;
  width: 40%;
  margin: 0 auto;
}


/* input-group */

.input-group {
  overflow: hidden;
  text-align: center;
  margin-bottom: 15px;
}

<body>
  <h1 id="title">Title</h1>

  <form id="loginContainer">
    <div class="input-group">
      <img id="usernameIcon" src="https://ya-webdesign.com/images600_/vector-login-username-1.png" alt="">
      <input id="usernameInput" type="text">
    </div>
    <div class="input-group">
      <img id="passwordIcon" src="https://ya-webdesign.com/images600_/password-icon-png-2.png" alt="">
      <input id="passwordInput" type="password">
    </div>

    <button id="loginButton">Sign in</button>
  </form>
</body>

Tips on aligning objects within div elements

Answer №1

Answer №2

Answer №3

Similar questions

Notification with jQuery

CSS: Placing a Column below a Float Positioned Column

Turn off drag and drop functionality and activate selection in HTML

Trouble with Showing Bootstrap 5 Icon

Issue arises after injecting HTML element into the DOM due to memory constraints and display inconsistencies

What is the best way to align three images horizontally using bootstrap?

Prevent ng-repeat from rendering the contents of my div

Tips for identifying emails from protected platforms such as ProtonMail or Hushmail

Tips for showcasing HTML code retrieved from a fetch request in a Vue component

Display an HTML image within a span tag and ensure it is aligned to the bottom

The background image stubbornly refuses to stretch to the full width of the section container

Can you use "or" or "not" syntax with CSS input type selectors?

Is it possible to use JavaScript to upload and manipulate multiple HTML files, replacing text within them to create new output HTML pages?

Understanding image sizes for uploads on Tumblr can be a bit confusing, especially when comparing pages to posts. Learn how to implement lazyloading for post

A guide on utilizing Node.js and Express to read a text file and convert it into an HTML table

How can we prevent a div from displaying if no image is pulled in using Custom Field? Looking for a solution in WordPress, PHP, and CSS

Is it feasible to utilize Sublime Editor for building SCSS/SASS files? Learn how to compile SCSS/SASS with Sublime Editor

When a checkbox is clicked, how can we use Angular 4 to automatically mark all preceding checkboxes as checked?

Connect my php search outcomes to a different webpage

Having an excessive number of select2 elements (more than 50) on a single screen with identical dropdown values can significantly slow down the page load time