Why are my text forms slightly misaligned?

Question

I'm trying to make a login modal for my website -

This is a screenshot:

I tried adding float:left to the input styles. It works, but the modal background gets compressed into a tiny line:

Any ideas what's going on?

If you use float, you need to set `overflow: hidden;` to the container. — Itay, Aug 13 '20 at 02:37
But a simple `text-align: left` to the container would suffice (without float) — Itay, Aug 13 '20 at 02:38
Dont use floating in 2020. Flex is your friend: `display: flex; flex-direction: column; align-items: flex-start;` add these properties to `
` element — lgabster, Aug 13 '20 at 03:24

score 2 · Accepted Answer · edited Aug 13 '20 at 10:00

2

You can add clearfix.

Add the clearfix class inside the HTML like this:

<div id="modal-container" class="clearfix">

And define clearfix in your CSS like this:

.clearfix::after {
    content: "";
    clear: both;
    display: block;
}

edited Aug 13 '20 at 10:00

Safwan Samsudeen

answered Aug 13 '20 at 02:43

ppwater

1

Thanks! What does `content: ""` do? – Aaron Aug 13 '20 at 05:02
1

if you are going to write ::after then you have to write content:"something" but since we don't need it, I just writed no contents. I don't know it realy well so look at this link too : https://stackoverflow.com/questions/8554043/what-is-a-clearfix – ppwater Aug 13 '20 at 05:45

score 0 · Answer 2 · answered Aug 13 '20 at 03:33

0

Just add <form style="float:left;> or You can add a p tag <p align="left"></p>

answered Aug 13 '20 at 03:33

Vansh Sachdeva

2 Answers2