CSS Floats have been around for a long time. Before other methods were available, floats were often used to create columns on a page. That is no longer the case, but floats are still useful for their original purpose which is to float any element you desire to the left or right to allow the text content of your page to wrap around the floated element. If you are just getting started with CSS, I recommend going to the start of this CSS for Beginners playlist: ua-cam.com/play/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit.html
Video 11:51 flow-root. That was something new that i learnt. I have been working in tech for so long. What seems legacy is perhaps some cases used everywhere, sadly! And that's what i thought was the only way. Thank you for this tutorial! Much needed
Hi Dave, I just finished watching your video on closures, and I just wanted to thank you. I had watched quite a few videos on the subject before, but yours was by far the best. Your delivery as a teacher, your pacing, your tone of voice, your attention to details, differentiating between closely related yet discrete/different concepts (e.g. closure vs lexical scope in this case) are all great. Thank you! Also, I have just found your channel (and subscribed), so I don't know much about the channel yet, but do you also do full courses on Udemy? Thanks, Faraz
@@DaveGrayTeachesCode looking forward to it; currently going through every video on your channel; both the missus and myself are learning a lot. Thanks.
Yes, we can. As mentioned and demonstrated earlier in the video, you see that solution in legacy code and it does work. The solution provided at 11:33 is considered to be the current and correct solution documented by MDN: developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats
I really do remember all the headache using float/clear in the past 🤕 I also remember that we used the ::after pseudo element to apply clear:both on the last item/paragraph, and I just noticed how old I am 👴 Thanks Dave, you explained it very well,
Hi Dave, excellent video and explanation. It really helped make a lot of sense of things regarding float. Question: Would overflow:hidden also wrap the floated div inside its container? How about applying clear:both to the second paragraph? Thanks in advance for your help!
In "Float Inside container element" I use just above the end of the which gives me the same result as overflow or display. Is it the wrong way to write?
It works concerning your question about the topic starting at 8:32. That said I mentioned earlier you see extra div elements with a clear in legacy code. As I mentioned at 11:33, the correct current way to solve this is with display: flow-root. All in all, the result is the same and this tutorial provides at least 3 ways of fixing the issue.
Hi Dave! Thanks for a new video. I got a problem i try to make a respositive website and all items are perspective to the size of the screen(on original) but on mine it have fixed size. Thats why when i make the screen wider the items get smaler)) What should i learn not to do this mistakes?
In your CSS, have you tried this * { padding: 0; margin: 0: box-sizing: border-box; body { min-height: 100vh; width: 100%; and make sure all your elements are within the body. Think of a "sandwhich" the body (or whatever syntax you prefer) is the bread and everthing in-between is the meats, cheese, ect
I'd also highly recommend you don't use this way of styling Dave is teaching in the video. I'm sure he would agree however he's showing this in the event you ever come across this way of styling in your job or ect. But thats whats amazing about CSS, you do your styling however you please and ultimately end up with the same results however if you want to save yourself a lot of code and headache. i'd highly recommend you grasp "FLEX" or "GRID"
This is a good start, and then width: 100% is not necessary although it will not hurt anything either. The body element is a block element and will expand to the width of the page by default.
Yes, I'm showing simple examples of how each concept works. I think you are suggesting I create classes in a project which is what I would mostly do. There is also the BEM naming convention which I often loosely follow. More on all of that including flex and grid to come. 💯🚀
I am not sure what you are asking. You can clear a float in a variety of ways that I display in this video. What you do depends on your goal for the page.
Hi everyone! I used the element section, as shown in this lesson, and got this warning on w3 validator: "Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections, or else use a div element instead for any cases where no heading is needed". Is there another element we can use instead of section? VS Code and w3 suggests using div but, in this case, there's already a div inside the supposed section element.
CSS Floats have been around for a long time. Before other methods were available, floats were often used to create columns on a page. That is no longer the case, but floats are still useful for their original purpose which is to float any element you desire to the left or right to allow the text content of your page to wrap around the floated element. If you are just getting started with CSS, I recommend going to the start of this CSS for Beginners playlist: ua-cam.com/play/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit.html
the best series i found on youtube , great job!!!
Glad you enjoy it!
Video 11:51 flow-root. That was something new that i learnt. I have been working in tech for so long. What seems legacy is perhaps some cases used everywhere, sadly! And that's what i thought was the only way. Thank you for this tutorial! Much needed
Glad it helped!
Done watching again! Thank you Dave! :)
Thank you Dave. I learnt more about floats!
You're welcome! 💯
Thankyou Dave..You taught amazingly well! Love from India !
@@bhanwishree1217 Glad I could help! 🙌
Hi Dave,
I just finished watching your video on closures, and I just wanted to thank you. I had watched quite a few videos on the subject before, but yours was by far the best. Your delivery as a teacher, your pacing, your tone of voice, your attention to details, differentiating between closely related yet discrete/different concepts (e.g. closure vs lexical scope in this case) are all great. Thank you!
Also, I have just found your channel (and subscribed), so I don't know much about the channel yet, but do you also do full courses on Udemy?
Thanks,
Faraz
You're welcome, Faraz! 🙏 I do not have Udemy courses yet. I do plan to release a premium course at some point.
@@DaveGrayTeachesCode looking forward to it; currently going through every video on your channel; both the missus and myself are learning a lot. Thanks.
thanks for the course man
Thank you so much sir the video was very helpful
You're welcome!
thank you so much dave you'r the best so for on youtube tutorials
You're very welcome!
Amazing tutorial thank you
You're very welcome!
Thank you, Dave
11:00 we can put that clear div inside the section underneath the paragraph
Yes, we can. As mentioned and demonstrated earlier in the video, you see that solution in legacy code and it does work. The solution provided at 11:33 is considered to be the current and correct solution documented by MDN: developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats
flow-root!!! 🙆♂Thanks a lot!
I really do remember all the headache using float/clear in the past 🤕
I also remember that we used the ::after pseudo element to apply clear:both on the last item/paragraph,
and I just noticed how old I am 👴
Thanks Dave, you explained it very well,
Thanks, Ahmad! I am also glad the days of the clearfix are behind us! 💯🚀
@@DaveGrayTeachesCode just like waking up from a bad dream
Thanks to flex/grid
Thanks!
thanks
Welcome!
Hi Dave, excellent video and explanation. It really helped make a lot of sense of things regarding float.
Question: Would overflow:hidden also wrap the floated div inside its container? How about applying clear:both to the second paragraph?
Thanks in advance for your help!
In "Float Inside container element" I use just above the end of the which gives me the same result as overflow or display. Is it the wrong way to write?
It works concerning your question about the topic starting at 8:32. That said I mentioned earlier you see extra div elements with a clear in legacy code. As I mentioned at 11:33, the correct current way to solve this is with display: flow-root. All in all, the result is the same and this tutorial provides at least 3 ways of fixing the issue.
@@DaveGrayTeachesCode Ok, I will follow the method as you mentioned. Thanks.
tnx
🙏
Hi Dave! Thanks for a new video.
I got a problem i try to make a respositive website and all items are perspective to the size of the screen(on original) but on mine it have fixed size. Thats why when i make the screen wider the items get smaler))
What should i learn not to do this mistakes?
In your CSS, have you tried this
* {
padding: 0;
margin: 0:
box-sizing: border-box;
body {
min-height: 100vh;
width: 100%;
and make sure all your elements are within the body. Think of a "sandwhich" the body (or whatever syntax you prefer) is the bread and everthing in-between is the meats, cheese, ect
I'd also highly recommend you don't use this way of styling Dave is teaching in the video. I'm sure he would agree however he's showing this in the event you ever come across this way of styling in your job or ect. But thats whats amazing about CSS, you do your styling however you please and ultimately end up with the same results however if you want to save yourself a lot of code and headache. i'd highly recommend you grasp "FLEX" or "GRID"
It sounds like you need a meta tag in your HTML header that starts like this:
This is a good start, and then width: 100% is not necessary although it will not hurt anything either. The body element is a block element and will expand to the width of the page by default.
Yes, I'm showing simple examples of how each concept works. I think you are suggesting I create classes in a project which is what I would mostly do. There is also the BEM naming convention which I often loosely follow. More on all of that including flex and grid to come. 💯🚀
Why did you use vw for the height of the box? I thought vw units are only for the width and for the height is vh unit?
Did you watch the video where I explain that or are you just looking at the resulting code? I do explain it in the video.
Hi Dave,
when I gave more content in the section the content coming under the float container what to do when that occurs
I am not sure what you are asking. You can clear a float in a variety of ways that I display in this video. What you do depends on your goal for the page.
Hi everyone! I used the element section, as shown in this lesson, and got this warning on w3 validator: "Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections, or else use a div element instead for any cases where no heading is needed". Is there another element we can use instead of section? VS Code and w3 suggests using div but, in this case, there's already a div inside the supposed section element.
Please see my other reply on this topic - I think you posted the question on the next video in the series.
@@DaveGrayTeachesCode Got it. Thank you, Dave! You're the best!
12:50 this float element isn't recommended so watch his Module on flex
👏👏
👍
oh boy, your tutorials are killers :)
Thank you!