Aligning Divs Side by Side CSS & HTML tutorial

in this video, I will show you how to place three DIVS beside each other using HTML AND CSS. It is easy to accomplish that, and you need to pay attention to the percentages of the width. All divs by default are 100%. if you divide it by three, the results will be 33.33% Set the width of each div to 33.33%. Float the left Div to left. float: left; float the right DIV to right float:right; and to center the middle div, just add margin: 0 auto; This way the divs should be placed next to each other smoothly. Also, if you want to add more width to a specific DIV, basically, decrease the percentage from one Div and add it to the other DIV.
#webDesign #CSS #html

[@michaelbach3681]

this is exactly what i was searching for thank you.

[@TheWheelchairGuy]

Glad I could help! Thanks for watching

[@jacobaltenburger4745]

same

[@gamago330]

Me tooooooo🎉🎉🎉

[@chonu55]

i usually dont leave a comment on videos but you dont know how happy this made me feel, watching my website for a school project fall into place as i learn tables can go into divs, i have been making it all in tables and this video was what i was looking for. its been like 3 weeks of being stuck slow process but now i can finish it.
again, thank you greatly "the wheelchair guy"

[@TheWheelchairGuy]

Thank you for watching. Please subscribe to learn more about html and css ✌️

[@TheWheelchairGuy]

make sure that you include this property in the middle div if the divs are not aligning properly:
display:inline-block;

[@sahilverma5181]

Or give display:flex to wrapper div and give flex:1

[@PT84]

You made it so easy for someone who hasn't used CSS/HTML in over a decade. You earned my sub.

[@TheWheelchairGuy]

I am so happy. Thanks for watching

[@robstencool3]

Thank you so much, you helped me figure out my first css task at my first job 😀

[@giovannimichel5506]

Thank you very much for the intel. I've been struggling since yesterday with the div tags, until I found this video.

[@DjordjeMajkic]

Perfectly explained. Thank you.

[@xerxesdiaries545]

Thank you so very much for this, sir! This is what I'm looking for. God bless you

[@TheWheelchairGuy]

Glad it helped!

[@tatertots78]

thank you so much, if this didnt work i was about to do like a million non-breaking spaces until it was on the right side

[@safebh8841]

this is gold i spent lots of time looking for such a simple explanation the calculator bit didn't cross my mind lol
rank = big PP

[@alibaker78]

Not just that you made it really easy to understand, but you made me proud too coming from the same country, Thank you for this video!

[@TheWheelchairGuy]

Thanks bro for watching ✌️🇮🇶

[@malsharashmika88]

Thank you Sir.... I was able to enhance my current knowledge through this video.

[@DataCloudAnalytics]

Thank you so much! This video helped out a lot getting my website together!

[@abdulbari5314]

Ty soo much bro after finding it soo long i finally got the thing i want and you showed everything and concept was also clear 🎉

[@idntcare159357]

Your delivery is very clear, thank you

[@TheWheelchairGuy]

Glad you think so!

[@Master-qk6sj]

Thanks a lot, I've been struggling with this forever but you explained it in 6mins :)

[@TheWheelchairGuy]

Glad it helped! I’m happy to hear that

[@ethan-fw4ue]

i really appreciate this tutorial! Thank you!!!!

[@Limboinpinbo]

You are a legend!
Thank you so much!

[@SingleAAkash]

thanks alot i was spending hours understanding some issue but this video give me idea to fix it mine is totaly different issue but your video just showed me a way to fix my problem

[@seiyalover1]

this is so clear and concise thank you so much

[@TheWheelchairGuy]

Glad it was helpful! I hope that you like and subscribe

[@prateekgarnayak9054]

Thq you so much sir. I was in great confusion of how to do this. But you made me understand.

[@markrise8039]

Thank you very much. Highly appreciate this video.

[@ranjanadissanayaka5390]

this video is awesome. helped me to save a ton of time. thank you.

[@adamadness2283]

This helped me and the keyboard sound so satisfying

[@TheWheelchairGuy]

Thanks for watching

[@marwanshamsan3991]

Thank you very very much , this is what I'm looking for

[@FluffScripts]

This is exactly what I needed. Thanks!

[@TheWheelchairGuy]

You're so welcome!

[@sumaiyasheikh2279]

Thanks a lot..my head was hang..your video make me happy

[@TheWheelchairGuy]

Glad to hear that

[@jonathanpadoa8987]

Mate that helped so much! Thank you!

[@TheWheelchairGuy]

Glad to hear it!

[@amandeepguggi]

Your video was really very helpful, to the point and no time wasting. Thank you so much ❤

[@TheWheelchairGuy]

Thanks for watching. I am glad to hear that

[@RahulGupta-fz6kx]

To the point video. Awesome!

[@TheWheelchairGuy]

Glad you think so!

[@kannebars7142]

Thank you sir for the tutorial.

[@shardulrane8208]

THANKS I AM HAVING THIS PROBLEM FROM MORE THAN 5 DAYS THANKS FOR SOLVING MY PROBLEM!

[@TheWheelchairGuy]

You’re welcome please sub

[@SCr_20]

Thanks man, helped a lot

[@TheWheelchairGuy]

Glad to hear it!

[@kavilivishnu2258]

Thank you very much, Sir! Helped a lot!

[@TheWheelchairGuy]

Glad it helped!

[@bharatishpuranik8417]

Very helpful. Thanks!

[@TheWheelchairGuy]

Anytime

[@lolgaming2342]

Thank u soo much.I've been struggling since yesterday.
Omg what a relief😊😊

[@TheWheelchairGuy]

You’re welcome. Please sub

[@jyotikharoud6704]

Thank you. Keep posting.!!

[@TheWheelchairGuy]

Thank you, I will

[@jromhek2070]

Well done man , keep up the good work .

[@TheWheelchairGuy]

Thanks for watching :D

[@sagardhuri7634]

Thanks man save my day☺🤗

[@channelofredes2022]

bro you helped me so much! I was trying to copy the google translate site to improve my skills, but i couldn't do the header, cuz the hamburger menu didn't behave...

[@aljehammuaadh9079]

Very good my bro . thanks .

[@moodswingsoflife]

Love and support from india..thank you for this

[@TheWheelchairGuy]

Thanks for watching

[@habibasaad2853]

Thank you very much! Helped a lot

[@TheWheelchairGuy]

I’m happy to hear that

[@Enesa952]

Thank you so much sir it really helped me I really need this

[@jackychan8539]

Best video I've found thank you!

[@TheWheelchairGuy]

I’m glad it helped you. Please subscribe to my channel

[@jackychan8539]

@@TheWheelchairGuy I already did :)

[@TheWheelchairGuy]

@@jackychan8539 ty

[@yaminivijay4739]

Thankyou so much!

[@unknownservers3420]

Thank you very much 100x I'm new to code I just finished learning Html but I still have a lot to learn

[@TheWheelchairGuy]

You’re doing great. Keep it up

[@akramsekh7742]

You are Rock bro now i can move my div thanks a lot good bless you thanks for tis video

[@TheWheelchairGuy]

You’re welcome. Please sub

[@koshiredemption]

I LOVE IT THANK YOU SO MUCH

[@TheWheelchairGuy]

I'm glad!

[@shrees9932]

thanks a lot💙

[@marlonabellanosa]

This video saved me.. Thank you sir

[@TheWheelchairGuy]

You are most welcome

[@LowMemeContent]

thank you so much sir!

[@TheWheelchairGuy]

Same to you!

[@nicksatlersatler493]

thanks, god bless you

[@testknowledge1292]

Good understand

[@jaiharekrishna2132]

Thank you you solved my great problem

[@TheWheelchairGuy]

I’m glad to hear that. I hope you like and subscribe

[@user-lg3ez6if9d]

I like this guy....

[@juniorfato8882]

Thank you sir. Your video helped me. God bless you.

[@TheWheelchairGuy]

Thanks for watching

[@engmohsin1]

God Bless you Sir Thanks

[@TheWheelchairGuy]

Thank you for watching

[@PSK833]

thank you so much!! i subscribed your channel sir!

[@TheWheelchairGuy]

Thanks for watching and subscribing

[@barbershop8803]

actually you helped me a lot :)!

[@TheWheelchairGuy]

I’m happy to hear that

[@suhailahzawawi]

thank youuu so muchhh, this is the one i'm looking for to complete my assignment,thank you so much❤️❤️😭

[@TheWheelchairGuy]

You’re welcome. Please if you need any tutorials, you can let me know. Once again, thanks for watching

[@suhailahzawawi]

@@TheWheelchairGuy what to do if i'm doing the css in the different file? how to call it?

[@TheWheelchairGuy]

@@suhailahzawawi you have to include place it in the head tag. Once it is linked, you can test it by changing the background color

[@suhailahzawawi]

@@TheWheelchairGuy thank youuu sir, thank you so much i really appreciate that❤️😭

[@cecily_6537]

Thank you!!

[@amanprajapati7832]

Thank you soo much🥰🥰
After many videos....finally you cleared my doubt🙏

[@TheWheelchairGuy]

Glad to hear that

[@amanprajapati7832]

@@TheWheelchairGuywelcome sir
❤🙏

[@matekovacs3800]

Really nice video!

[@TheWheelchairGuy]

Thanks for watching. Please sub

[@CaptainOhG]

my guy MASHING that keyboard

[@TheWheelchairGuy]

😂

[@ASLGaming]

this helped me soo much thank you

[@TheWheelchairGuy]

Glad to hear that. Watch my latest tutorial, you might like it. ruclips.net/video/cSon4PW-tiE/видео.html

[@TheWheelchairGuy]

Wow!

[@aidarmukambetov880]

Thank you !!!

[@TheWheelchairGuy]

You're welcome!

[@robf5550]

great thanks : )

[@anopta]

Great presentation. You could achieve the same thing without calculations by using this on the .container class:
justify-content: space-between;
display: flex;

[@TheWheelchairGuy]

That’s if you’re using flex. You’re right 😍

[@jozeflazur4632]

Bro thank you sooooooooooooooooooooo much you help me a lot

[@TheWheelchairGuy]

Thanks. Please subscribe bro

[@azemazaotaru9788]

this partially fixed my problem

[@TheWheelchairGuy]

Hello, what are you trying to accomplish? Let me know, and I’ll help

[@Rocky-tn4pk]

thanks for this sir.

[@TheWheelchairGuy]

Most welcome

[@blissfulbuzzTV]

Thank you for your video

[@TheWheelchairGuy]

Thanks for watching!

[@sarahcaballero4693]

Thank you sir!

[@TheWheelchairGuy]

Thank you for watching. Please check out my latest tutorial ruclips.net/video/bMYFhl0KCnU/видео.html

[@sunnybharathkiran6871]

Thank you :)

[@TheWheelchairGuy]

You're welcome!

[@ALEXJ99]

Thank you!

[@TheWheelchairGuy]

You're welcome!

[@ersaix0180]

I liked it but I have a question, that how the middle div got on top between other two divs with float left? I mean I tried a lot with margin to get the div2 in the middle but it didn’t had any movement. Thanks

[@TheWheelchairGuy]

Your middle div did not go to the middle because you have to set the width of the div and you have to set a display to it. For instance, display:block; then, you set margin left and right to auto.

[@abirsonet925]

useful video

[@TheWheelchairGuy]

Glad to hear that

[@gamago330]

Thanku so much

[@abaadali7180]

good

[@robertrodriguesdesouza5818]

thank you

[@adinshhh4378]

Thank you sir

[@TheWheelchairGuy]

All the best

[@TheWheelchairGuy]

Watch my latest video about aligning DIVS Side By Side ruclips.net/video/Jstq1otuHAI/видео.html

[@WaltuhBlack420]

I've created a system where there are fields where u can input data and it will send the data to the data base once submit button is pressed. Then i saw your vid im planning to add more fields but im having trouble on how can i make all that three div in one submit button. Do u have a tutorial about something like that?

[@TheWheelchairGuy]

Could you please explain it more a little bit, so I can tell you what to do? Thanks

[@pete531]

Thank you, i am practicing making a blog-type of web page, could you please tell me how to make div middle (which i put at 200px height, its a headline) go across the whole page horizontally overriding other divs?? thanks again

[@TheWheelchairGuy]

You can use z-index to make a div go over the other divs

[@dhaanizinta1980]

Good

[@TheWheelchairGuy]

Thanks

[@BobaT__]

so lets say I want to make ONE div and space out the text inside that one div like you did with %'s. How could I go about it?

[@TheWheelchairGuy]

Basically use padding: 10%; or something like that

[@sarahsingh2946]

Hi, my 'float-right' does not seem to align, meaning when all of the above is done it sits much like your centre piece one lower than the other 2 divs. Please help

[@TheWheelchairGuy]

Make sure you set the display of all to to display: inline-block;

[@At-automotive]

Thanks bro😘

[@TheWheelchairGuy]

Welcome

[@johnkabiu4418]

Thanks.. just need to watch this and done.. problem solved

[@TheWheelchairGuy]

I’m glad it worked. Please like and subscribe

[@hamdaabdifatahxamdadaacad270]

Tjgkg

[@dipukushawaha5776]

thanks

[@JacanaProductions]

Just wonder why the listing of divs was somewhat random, right, left, middle. Why not left, middle, right? Or I am thinking or this in terms of language syntax vs CSS coding?

[@TheWheelchairGuy]

You could do that and it’s more proper, but I was l just showing you that it doesn’t really matter

[@nandhini.c4352]

Thanks❤

[@TheWheelchairGuy]

You're welcome 😊

[@Ravi_visual]

❤❤

[@jacobbolmoses8541]

Thanks

[@TheWheelchairGuy]

🙏

[@wygworld]

THANKS

[@TheWheelchairGuy]

You're welcome!

[@proalgcuber198]

What are you using to write the code, i cant seem to find an editor or something like that

[@TheWheelchairGuy]

Vs code

[@proalgcuber198]

@@TheWheelchairGuy thanks very much!

[@proalgcuber198]

@@TheWheelchairGuy btw, is it an app i can get on mac?

[@TheWheelchairGuy]

@@proalgcuber198 yes. Here is the link code.visualstudio.com/download

[@proalgcuber198]

@@TheWheelchairGuy thanks man, im watching a tutorial right now to see how to use it, thanks very much, im also going to watch a lot of your videos to get better at what i am doing

[@apna_gamer507]

if i want to scroll the middle div while my left and right div remains fixed like facebook then what i have to do???. need youir help

[@TheWheelchairGuy]

You can simply add position: fixed; to the elements you want to stay on the screen.

[@Themescore]

Tnx bor

[@epycperson]

so i have aligned a text at left side and a button at the right side, but they arent in same line. I want them in same line how do i do it i dont get it

[@TheWheelchairGuy]

set the display to inline block for both elements
display: inline-block;

[@epycperson]

@@TheWheelchairGuy thanks it worked