CSS width auto vs 100% | What's the difference?

A look at the difference between width: auto and width: 100%

#css

--

Come hang out with other dev's in my Discord Community

---

Keep up to date with everything I'm up to

---

Help support my channel

---


---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[trusterzero]

investing 2 minutes here saves me loads of time in the future

[sagniksaha]

Man you saved me . I always use width:100 % and don't understand why the text goes out of the viewport

[edwardgray]

Width is also applied depending on how box-sizing is set, which defaults to the width of the content. So even without margins, by default a *width:100%* is applied to the content (text in this case), then padding and borders are added on afterwards.

Using *box-sizing: border-box* means the width is applied to the border, and the content width is applied after taking into account the padding and border widths.

[helpimblind]

When you worry that YouTube shorts can be addictive and bad for you. Then you find Kevin's shorts. And actually they are fun and educational. Thank you!!

[petarkolev]

Kevin, I have 4+ years of front-end experience and you doesn't seas to amuse and educate me with every single video!!! I love your work and I think you are a true bless to beginners and a huge huge help for more advanced developers ❤️

[petervandylian]

Kevin's channel is my first stop when I seek out information about frontend developing. I come back often to relearn CSS concepts and many amazing tips just like this video. Sometimes these small contrast between the auto and 100% may not stand out as much as we'd thought of but Kevin is able to point out these differences which benefits everyone to be come a better designer/coder. Many thanks to you Kevin!

[ZaidMarrie]

I've noticed this a couple of times before. Never really understood why, until now. Thanks again Kevin! You are a life saver.

[luiscolome]

I love 5 minutes Fridays are back!!! Explanations like this is what sometime we need like you said to meka fundations more clear. Thanks million Kevin.

[shahrukhm]

So finally managed to understand why my UI not working the way I wanted. Thanks man

[kholofelomocheko]

Love you Kevin✊🏾 Thanks for the awesome tutorials!

[hectorg]

Aww yea! Glad this was the first result youtube gave me. I sorta knew you may have made a video on this. Thanks!

[taraselegesiere]

Wow Powell, the knowledge I have gain in this short video is astronomical. Thank you for showing us the way.

[naimurrahman]

If I could do, I would invite you to my home to have a feast with me with all the traditional food of my country, you saved my life sir... I have been searching for this solution for a year and here it is... A mountain like thanks...

[marcindomanski]

Some time ago I beat Plurasign CSS test. I miss one question. "What is default width of div".
You could choose: 100%, some pixels (i dont remember) etc.
There was no answer "auto". I choose 100% and when test was over I wrote to them that they have issue in that question, because default width of div (and other elements) is "auto"

[C.Pachovsky]

Now this is EXACTLY why I follow you. QUALITY content!

[AmmarOuds]

Fantastic simplified explanation, as usual
Really really awesome 😎

[j.r.]

THANK YOU! THANK YOU! THANK YOU! I have been trying to get a clear explanation on the difference for days now and you made it so clear! I'm so happy, I almost teared up. Love you channel. Keep up the great work!

[nataliabujnowicz]

short videos are great! many many thanks Kevin! :) <3

[bikideka]

Always had this problem of overflowing, didn't know auto exit. Thanks man

[jas]

Kevin, you’ve made me love web dev. Thank you for accelerating my potential in creating applications that will have a positive impact on society. Thank you.