CODEWITHSUNDEEP
htmlcss
simic21
simic21

Reputation: 23

How to decrease gap between elements without moving both of them

How can I move this "name" element without moving "surname" too?

https://prnt.sc/px23sk

I want "name" and "surname" in the same row, like you have on Facebook. I don't really understand positioning yet, but I have searched online and I still don't know to apply it on my example because of the many divs and content inside each other.

I added float: left; to my "name" element so it goes left, but when I try to add margin to make it go closer to "surname" it doesn't behave how I want.

Adding margin on name-position class also moves "surname" element right.

Here is my code: https://codepen.io/simic21/pen/zYYmbqz
And this is the effect that I want: https://prnt.sc/px26ic

Upvotes: 0

Views: 65

Answers (2)

tgyger
tgyger

Reputation: 241

something like this?

      <div class="form-content-inline">
        <label for="name" id="name-label">Name</label>
        <input type="text" id="name" name="ime" placeholder="Name" class="form-control" required>
      </div>

      <div class="form-content-inline">
        <label for="surname" id="surname-label">Surname</label>
        <input type="text" id="surname" name="prezime" placeholder="Surname" class="form-control" required>
      </div>

.form-content, .form-content-inline {
  margin: 0 auto 1.25rem auto;
  padding: 0.25rem;
}
.form-content-inline {
  display: inline-block;
}

Upvotes: 0

step
step

Reputation: 2410

Remove float and add display: inline-block; to divs for name and surname.

Upvotes: 1

Related Questions