HomeОбразованиеRelated VideosMore From: Thapa Technical

CSS Float Property Tutorial in Hindi | Float Left and Float Right in CSS Explained

128 ratings | 4066 views
Welcome all, we will see the CSS Float Property explained in Hindi. The float property specifies how an element should float. Website for Code and Task: https://www.thapatechnical.com/ Note: Absolutely positioned elements ignores the float property! Description The float property causes an element to be moved to one side of the parent element.s content area, which allows other content to flow around it. Possible Values left − The element is floated to the left side of its parent element's content area. right − The element is floated to the right side of its parent element's content area. none − The element is not floated. Applies to All the elements but positioned elements and generated content css float center css float clear css float top div float left css float bottom floating box css css display css clear "Honestly, I have no idea how to ask, but if you donate using PAYTM to support me, It's gonna help me a lot." PAYTM NUMBER: 9518369954 Guys, Please support my channel by SUBSCRIBE to my channel and share my videos in your Social Network TimeLines. Don't Forget to Follow me on all Social Network, Instagram Link: https://www.instagram.com/vinodthapa55 Facebook Link: https://www.facebook.com/vinodthapa55 Twitter Link: https://twitter.com/vb55thapa Facebook ThapaTechnical Page Link: https://www.facebook.com/vinodbahadurthapa Youtube Link: https://www.youtube.com/channel/UCwfaAHy4zQUb2APNOGXUCCA
Html code for embedding videos on your blog
Text Comments (25)
Thapa Technical (7 months ago)
Website for Code and Task: https://www.thapatechnical.com/ all the best :) Don't forget to subscribe guys :)
Reshma R (6 months ago)
thapa sir, aap bohoth achche videos banaathe hain.. aap ENGLISH series bhi start kijiye naa...on each video taaki poori duniya ko pata chale ki aap bhi ek superb web developer ho... pls sir, YOU CAN DO IT...aap kuch bhi kar sakhte ho ;-D cummonn
Reshma R (6 months ago)
thapa sir, i really enjoyed doing this task...aap pls har topic mei tasks dijiye ..plz sir..
Reshma R (6 months ago)
i have sent the code to your mail id sir....coz my code is exceeding 4,096 characters... accept nahi kar raha hai woh...isliye ;-D
John Thapa (3 days ago)
Awesome video
Abdul Rehman (3 days ago)
please short your introduction please it too long...
goswami soni (6 days ago)
sir make new video for footer header ..
Praveen Kumar (5 months ago)
If we created the complete website in mean using css. I mean not using container. Is that responsive. [email protected] 8247 63 1965
Praveen Kumar (5 months ago)
Nice But I have one question Just think the blue box is for menu and the pink box is releated for other space and now v want to extend the pink box vertically and blue box position should be fixed. IS IT POSSIBLE SIR [email protected]
akchhaya soni (6 months ago)
thanks for this video can you make a chat box using bootstrap, ajax and php and comment box. i ll wait for your video.
muhammad abrar (6 months ago)
sir plz plz plz plz plz plz make a video on shopping cart... plz plz plz plz
Lalit Pawar (6 months ago)
Bhai plzz My SQL data structure ki series bnao sikhna hai bhai My SQL bhi
You Tech (6 months ago)
Bhai quiz application kaisa banaye ...
Rohit raju (6 months ago)
Bro can u plz make a video of full landing page with link in the same pages ex:- https://www.webprofits.com.au/lp/seo-analysis/ Something like this
srivardhan kandike (6 months ago)
also teach us on responsive web design
Hindustani Supporter (6 months ago)
sir very nice video i have just write the code <!DOCTYPE html> <html> <head> <style> *{margin: 0; padding: 0; font-family: arial; text-transform: uppercase;} .all-div{ width: 100%; height: 80px; background: rgba(0, 0, 0, 0.7); } .float-left{ width: 30%; float: left; color: orange; } .float-right{ width: 70%; float: right; } h1{padding-left: 25px; line-height: 80px;} li{list-style: none; display: inline-block; margin-left: 150px;} a{text-decoration: none; color: white;} ul{line-height: 80px; position: absolute; right: 0px; } a:hover{color: orange; border-bottom: 2px white solid;} </style> <title>Thapa Comment</title> </head> <body> <!-- I can also fixed the menu but when code will so large --> <div class="all-div"> <div class="float-left"> <h1>Hindustani</h1> </div> <div class="float-right"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">LOGIN</a></li> <li><a href="#">SIGNIN</a></li> <li><a href="#">ABOUTUS</a></li> </ul> </div> </div> <div class="real-body"> <h1>Thapa technical your are the best youtuber in the world.&#10084;&#10084;</h1> </div> </body> </html>
Sourabh jamdade (6 months ago)
When we set float property to first div then,it is complasry to set float property to second div..... Plz answers it....
Reshma R (6 months ago)
yes...it is compulsory...especially when you want to create a layout ;-D
Ashutosh Kumar (6 months ago)
what about css grid
Crazy Circle (6 months ago)
Bro why do you not purchase a mic
Bro sass use in css how to use please made a video
Kamran Siddique (7 months ago)
bahi is trha ki menu banana sikhay dyn please https://benfrain.com/a-horizontal-scrolling-navigation-pattern-for-touch-and-mouse-with-moving-current-indicator/
pc computer (7 months ago)
Prabhat kumar (7 months ago)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo Compony layout</title> </head> <style> *{ margin:0; padding: 0; } header{ width: 100%; height: 100px; } .left_side{ width: 30%; height: 100%; background-color: orange; float: left; } .right_side{ width: 70%; height: 100%; background-color:blue; float: right; } h1{ font-size: 2.5em; text-align: center; text-transform: capitalize; margin-top: 25px; color: #fff; text-shadow: 0px 0px 5px gray; } </style> <body> <header> <div class="left_side"> <h1>compony Log</h1> </div> <div class="right_side"> <h1>compony menu item</h1> </div> </header> </body> </html>
Puneet Makhija (7 months ago)
Sir cloud computing start kr do tym bhut kaam hai plz

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.