CSS Float & Clear | Sigma Web Development Course - Tutorial #34
Vložit
- čas přidán 12. 09. 2024
- Access the Sigma web development course playlist: • Sigma Web Development ...
➡️ Source Code: github.com/Cod...
➡️ Notes and CheatSheets: www.codewithha...
➡️ English Subtitles are now up for all the videos!
►Checkout my English channel here: / @programmingwithharry
►Instagram: codewithharry
Download UltraEdit Trial for Free: bit.ly/UltraEd...
python, C, C++, Java, JavaScript and Other Cheatsheets [++]:
Playlist: • Coding CheatSheets 🧾 b...
►Learn in One Video[++]:
Python Course with 5 Projects: • Python Crash Course in...
Python[15 Hr]: • Python Tutorial For Be...
Python Advance[3.5 Hr]: • Python Programming Cou...
Python[1 Hr]: • Learn Python In Hindi ...
Python[2 Hr]: • Python Tutorial In Hin...
Python[15 Min]: • 15 Minute Python Tutor...
JavaScript[1 Hr]: • JavaScript Tutorial
C[1.3 Hr]- • C Programming Tutorial...
php[1 Hr]: • Learn Php In One Video...
php[2.3 Hr]: • Php Tutorial for Begin...
php[Project]- • Login And Registration...
HTML[30 Min]: • HTML 5 Tutorial For Be...
CSS[8.5 Hr]: • CSS Tutorial In Hindi ...
CSS[1.4 Hr]: • CSS 3 Tutorial For Beg...
Wordpress[3.2 Hr]: • How To Make a WordPres...
Angular[2 Hr]: • Angular Tutorial in Hindi
Java[2.3 Hr]: • Java tutorial in hindi 🔥
Web Scraping[1 Hr]: • Web Scraping Tutorial ...
MongoDB[2 Hr]: • MongoDb Tutorial For B...
Numpy[1 Hr]: • Numpy Tutorial in Hindi
Android Dev[12 Hr]- • Android Development Tu...
Linux[1 Hr]: • Linux Tutorial For Beg...
JQuery[1.1 Hr]: • jQuery Tutorial For Be...
Git and GitHub[1.1 Hr]: • Git & GitHub Tutorial ...
►Complete course [playlist]:
React: • React Js Tutorials in ...
Python- • Python Tutorials For A...
OOP Python- • Object Oriented Progra...
Java: • Java Tutorials For Beg...
JavaScript- • JavaScript Tutorials I...
PHP- • PHP Tutorials in Hindi
C- • C Language Tutorials I...
C++- • C++ Tutorials In Hindi
Git & GitHub- • Git and GitHub Tutoria...
Android Dev- • Android Development Tu...
Python GUI- • Python GUI: Tkinter Tu...
Web Development- • Web Development Tutori...
Python Django: • Python Django Tutorial...
Projects Using HTML, CSS & Javascript- • Projects Using HTML, C...
Data Structure and Algo: • Data Structures and Al...
Follow Me On Social Media
►Website (created using Django Rest & Angular): www.codewithha...
►Facebook: / codewithharry
►Instagram: / codewithharry
Twitter: / codewithharry
Comment "#HarryBhai" if you read this 😉😉
To maintain top quality videos and learning experience, I might take a break in between. Taking it easy and not as a 100/150/200 days challenge. Dont worry we will finish everything in time. Hope you all will understand 🙏
Okay Harry bhai... Aap aaram se video daalo ... Apne speeed se❤❤❤
Yes off course
Harry sir meri problem ka resolution de dijiye browser ko 100% krne pe width me scroll bar aa jata h kre kre shii
@@anchalsingh0000 bro universal selector lagake usme boxsizing:border-box krke dekho bro..
ok harry bhai i understand😎
na left mai dikh jaeyo, na right mai dikh jaeyo..... top class harry bhai 🔥
Na left main dik jayiyo, na right main dik jayiyo..haha, amazing Harry sir,, superb and fun way of explaining the concepts, really love it..☺😍
na left mai dikh jaeyo, na right mai dikh jaeyo..... top class harry bhai
Completed 34 videos in total and I'm absolutely proud of it! Never in my lifetime watched so many videos all at once but Harry sir makes it so interesting and the explanations are soo damn good...I can't stop anymore! I've learned soooo much in these few days! Thanks to you sir! #sigmabatchop!
same iam shocked that its easy when harry explaining even paid coures cant explain like this
aunty aab bhi web dev sikh rhi ho
@@elonmusk23213 harry bhai ka rate free hai😏
hey sis we have similar names
iam at 55
07:20 Na left me dikh jaiyo na right me dikh jaiyo.... epic 🤣🤣🤣🤣
#SigmaBatchOp
clear : left; -> koi bhi floating element left me nahi aa payga.
clear: right; -> koi bhi floating element right me nahi aa payga.
clear: both; -> koi bhi floating element left aur right me dono jagah najar nahi aayga.
ab konse video me hai tuu
Another great video Harry bhai....
Na left mei dikh jaiyo, na right mei dikh jaiyo.... 😂
Harry Bhai sahi tareeka teaching ka... Amazing bhai..... 🔥🔥
What is the essence of this video:
1. float: left; or float: right; => provides display-flex-like properties. but can be controlled by its position interchanging the value left and right.
2. If the content is bigger than the size of the other divs then the content will overflow.
3. To prevent the overflow, simply use the CSS property display: flow-root;
4. To avoid an item from overlapping with another div simply use the CSS property clear: left, clear: right, or clear: both; as per the requirement.
please make a summary like that for more on CSS variables video too it is very helpful
tq boss
🎯 Key Takeaways for quick navigation:
00:00 🚀 *Understanding float and clear is essential, even though their usage has decreased with the advent of Flexbox.*
03:39 🔄 *Use `display: flow-root` to resolve overflow issues when using the float property in CSS.*
05:31 🛑 *Utilize the `clear` property to control the floating behavior, such as `clear: right` to prevent elements from floating on the right side.*
08:09 ⚠️ *While understanding float and clear is important for maintaining old websites, it is recommended to avoid using them for modern layouts and instead opt for CSS Grid and Flexbox.*
Made with HARPA AI
Both in Clear means that the element will not float on both right and left side of the style applied element in this case the div
Tutorial - 34 Done✅
#Sigma Batch OP
Really amazing Course❤🔥
Watching from Nepal
Lots of Love Harry Bhai 💚
Your teaching method is great, sab kuch samjh aata hai, clear makes sure none of the other content is allowed nearby the mentioned content
Haris bhai you are great.May ALLAH give u success in this life and here after(Ameen)
he is Harry
@@elsa-uc7oe his full name is haris ali
Ye wala div: mera na right mai koi dikhjaiyo na left mai dikhjayoga.
Love you harry bhai.
Harry bhai just a request ki aapko jab bhi gap lena ho between ka course for obvious reasons aap lelo.. Koi dikkt nhi hai... But aapke students daily practice na chod de... Uske liy 2-3 exercise de dia kro... Ya ek hi challenging exercise dedo jisme hm apna flow barkaraar rkhe❤....
We'll keep supporting....!! Don't worry....Your students got your back....
#SigmaBatchOP❤🎉
8:00
na left mai dikh jaeyo, na left mai dikh jaeyo 👀👀
harry bhai ki jai ho ❤🔥👑
Harry Mata jindabad
#Day34 #SigmaBatchOp❤
Thank you harry bhaii Your explanations are always so clear and easy to follow. I really appreciate your dedication to helping us learn.
when this course will complete? Like in total how many videos will be there in this complete course?
Another great video Harry bhai....
Na left mei dikh jaiyo, na right mei dikh jaiyo....
Harry Bhai sahi tareeka teaching ka... Amazing bhai.....
#SigmaBatchOP
clear: both; means the elements will not Float right or left side.. ""Dikh mat jaiyo 😊""
Harry Bhai, div says : dikhna mat... mere aas pass 😅
As always, Sigma Batch OP ❤
😂😂
Par ha oper daksakta ho
Na left mei dikh jaiyo, na right mei dikh jaiyo..Amazing way of teaching
Tutorial 34 done.✅
SIGMA BATCH OP!
Great to hear about break harry bhai because I am second year student on college level we are studying now DSA as well as oop which is bit difficult so it was very challenging for me to manage all these things at the same time I highly appreciate your break idea.❤❤
Na left main dik jayiyo, na right main dik jayiyo..haha, amazing Harry sir,, superb and fun way of explaining the concepts, really love it..
haris bhai youre great man. allah gives u success.
na left mai dikh jaeyo, na right mai dikh jaeyo.....
Tutorial - 34 Done ✅
#SigmaBatchOP #HarryBhai
Thank you ❤ Harry bhai for this amazing course
You are a great teacher not boring and dikh mat jaiyo left or right me joke was great#SIGMABATCHOP❤
Thank you harry bhaii Your explanations are always so clear and easy to follow. I really appreciate your dedication to helping us learn.
Respect for you my brother done learning html from you and now shifted to css can't wait to become a front end developer 🎉 from Pakistan sigma batch op
Na left main dik jayiyo, na right main dik jayiyo..haha, amazing Harry sir,, superb and fun way of explaining the concepts, really love it.Na left main dik jayiyo, na right main dik jayiyo.
Bhupendra jogi
Na left main dik jayiyo, na right main dik jayiyo..haha, amazing Harry sir, superb and fun way of explaining the concepts, really love it..
Really enjoyed it
Harry bhai op
Op
div be like : "mere aage peeche dikh mat jaivyo🤣🤣😅"
Thank you harry bhaii Your explanations are always so clear and easy to follow. I really appreciate your dedication to helping us learn.
#SigmaBatchOP
Really helpful video sir 👍👍
Suno Paid Courses,,,,Harry Bhai ke Sigma WebDev ke course ke...naa left me dikh jaiyo aur na hi right me.....Amazing Course Harry Bhaii
na mere right mai dikh jaiyio na right mai😅 - harry app bilkul dhyan hatne hi dete video se - Great Explanation of concepts. Love your course. #SigmaBatchOP
6
Reply
Na left main dik jayiyo, n
a right main dik jayiyo..haha, amazing Harry sir,, superb and fun way of explaining the concepts, really love it
Na left mein dikh jaiyo na right mein dikh jaiyo..baat smjh mein aayi .....❤ Thankyou Harry Bhai❤
Your way of explaining is so funny and understandable. You do not let us feel bored during whole video...thanks for this amazing course❤❤
Na left main dik jayiyo, na right main dik jayiyo😂🤣.haha, amazing Harry sir,, superb and fun way of explaining the concepts, really love it..☺😍
Sigma Batch OP 🔥🔥
nNa left main dik jayiyo, na right main dik jayiyo..haha, amazing Harry sir,, superb and fun way of explaining the concepts
#Sigma batch op💥
clear both-na tu mere idhar dikh jaiyo na tu mere udhar dikh jaiyo
Best free course better than any paid course with quality education 🔥🔥🔥🔥
mery na idhr nazar aiyoo na udher nazar aiyoo.
Now Happy Harry Bhaiyaaa.
Float property is used to align the image left or right and clear property is used to not allow the position of float to be in the margin .
Na left me na right me dekh jayeo kehta he ye div
Tutorial 34: done
Sigma Batch OP
Na left me dikh jayiyo , na right me dikh jayiyo.great explanation of concepts.
8:04 kya keh rha h ye div? div keh rha h ki na mere left mein dikh jaio na mere right mein dikh jaio, koi bhi nhi dikhna chahiye mere left right maine elaan krdia h ab sab maan jao chupchap xD. Doing great so far harry bhai. One of the best playlist for web development. Keep going Keep grinding. I am going to catch you up in upcoming days so increase your speed coz if you wont then think I am your Yamraj xD
thank you so much harry bhai .you are absolutly amazing people that never dispointing us
Harry bhai you sigma batch course is PP🔥🔥🔥🔥
Na left me dikh jaiyo na right me dikh jaiyo.... epic
8:00 div be like:na left mei dikh jaiyo na right mei.
This is the interaction while learning we love about Harry bhai.
Intro and Outro boost my energy to watch these tutorials 😍.
This is the best course ever for front on youtube.
one request to you please consolidate the All notes of HTML and CSS respectively in one pdf so that we can revise all things easily
thanks
na left mein dikh jaoio na right mein, superb video harry bhai
when we use clear property in float so that element says to another element "Na mere left main dikh jaio Na right main samajh main aayi" #sigmabatchop Harry Bhai is great
#SigmaBatchOP 7:42 clear:both matlab ki na mere left me dikh jayeo or na hi mere right me dikh jayeo warna ye aagaha kar raha hai ... haina Harry bhai , your wish granted , kar diya comment (two-way interaction) 🔥
dikh mt jaiyo
na mere left mai dikhiyo na mere right mai dikhiyo
hahahaha...!!!!
amazing harry bhaiya bhot maja aa rha hai apke course mai bss aise hi chalta rahe
clear:both-->na left mai dikh jaeyo, na right mai dikh jaeyo.
Na left me dikh jayo na right me
Thank you for this amazing course 💗
Sigma batch OP
7:20 Na left me dikh jaiyo na right me dikh jaiyo! 😂 Sigma Batch OP❤
na left mai dikh jaeyo, na right mai dikh jaeyo..... wonderrful
harry bhai
0:18 Sigma Batch OP.
7:50 agar both hai tho na left me dhikna na hi right me dhikna!
Sigma Batch Op
Harry Bhai OP
div be like : mere na left me dikh jaiyo na right me dikh jaiyo... 😂😂😂
Sigma Batch OP ...! ❤❤
real hero of programers ⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐ harry bhai
i agree with him have to leave old stuff behind
but have to be ready for interview
na left ma dikh jaiyo na right ma dekh jaiyo awesome harry bhai......
mere idhar mat jaiyo, mere udhar mat jaiyo,,,, amazing lines by harry bhai
Na left main dik jayiyo, na right main dik jayiyo. Great Explanation of concepts. Love your course. #SigmaBatchOP
Sigma Batch OP.
best lectures for web dev
na left mai dikh jaeyo, na right mai dikh jaeyo..... aaj to harry bhaiya ka din bana dala
"This man could have earned millions of rupees by selling this course, yet he chose to keep it free for us. Harry deserves much respect. 🙌"
#SigmaBatchOP
7:53 clear: both ; ye property kehti hai ki saale ( img in this case ) na to tu mere right me dikh jaiyo na mere left me, aayi baat smjh me.
Harry bhai ko bura nahi lagna chahiye bs 😊
#SigmaBatchOP
This is the best course I've been ever following live! 😊😊
Na left main dik jayiyo, na right main dik jayiyo....heyyy harry bhaiiiii🤣🤣🤣🤣🤣
na left mai dikh jaeyo, na right mai dikh jaeyo......harry bhai op
Sigma batch OP!
wese to usually i don't comment on any video but harry bhai ne bola he isliye.......clear: both kehta he na left me dikh jaiyo na right me dikh jaiyo😎
#Sigma batch are really out standing HARRY BHAI 😍😍😍
I like the way you teach Harry sir
thnx bhaiya :)
completed on 2/3/24
liked his videos from starting
adorable style of teaching.😍
"naa idhar dikh jaiiyo naa udhr dikh jaiiyo"🤣
Harry bhaii op🔥
Na left mai dikh jaiyo na right mai dikh jaiyo . # harry sir
7:54 {clear : both} property says na mere left me dikjayiyo na mere right me dikh jayiyo
Sigma Batch Op as always 👍👍❤❤
clear:both;. means there should not be any other element (image)on either side of paragraph
Na left me dikh jaiyo or na right me dikh jaeyo 😂 harry bhai amazing.
Thanks for this free course harry bhai ❤
Thank You Harry Bhai For such amazing course
na idher dikh jayio na udher dikh jayio , nice one harry bhai 😂😂
content - on the top of the notch !
Very helpful series in web disigninig