HTML5 and CSS3 beginner tutorial 42 - Creating a form layout

This tutorial will float form labels and form inputs next to each other.

Don't forget to tell them I sent you.

Follow me on social media:

Patrons can download the code here:

Become a Patron:

Subscribe to my Vlog channel:

Subscribe to this channel:

Please note:
I do not offer web development services, private tutoring, or "assistance" on school or university projects. I am not an online support service, and I'm not interested in setting up a "start up" business with viewers.

[mathiaspiletti]

Great clearfix explanation, and wonderful tutorial series!

[michaelhsu]

Thank you so much Quentin! I really enjoy this tutorial !

[devashraygupta]

you floated both form.label and form.input to left....but it it worked???u should have floated form-input to right for it to show on right....still how did floated on right even though u used form-input to float to left???

[prwt]

Why write extra line of codes to clear floats and complicate it?

You can leave content property blank and there's no need to use fullstop, like this:

.form-row::after { content: " "; display: table; clear: both; }

[daniellaerachannel]

great video
great mic(blue Y.) love it too
whats the screen recording tool?
thanks

[devashraygupta]

I still have problem in clear and float property??could u plz make a seperate video to explain this...plz

[EasyTheEditor]

can u please tell how to create a progress bar in html 5

[chibikeechendu]

Boss Can you teach how to make it mobile compatible please

[devendrahande]

I just found a shorter code for doing
.form-row{
border: 1px solid red;
margin-bottom: 10px;
}

.form-label{
float: left;
width: 20%;
}

[--R----]

Good tutorials, but you have problems while explaining clear fix, you obviously know how it works but you don't know how to explain it.