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

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

63 ratings | 1215 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 (22)
Thapa Technical (1 month ago)
Website for Code and Task: https://www.thapatechnical.com/ all the best :) Don't forget to subscribe guys :)
Reshma R (23 days 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 (23 days ago)
thapa sir, i really enjoyed doing this task...aap pls har topic mei tasks dijiye ..plz sir..
Reshma R (23 days 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
Praveen Kumar (17 days 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 (17 days 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 (1 month 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 (1 month ago)
sir plz plz plz plz plz plz make a video on shopping cart... plz plz plz plz
Lalit Pawar (1 month ago)
Bhai plzz My SQL data structure ki series bnao sikhna hai bhai My SQL bhi
You Tech (1 month ago)
Bhai quiz application kaisa banaye ...
Raju Rohit (1 month 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 (1 month ago)
also teach us on responsive web design
Hindustani Supporter (1 month 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 (1 month 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 (23 days ago)
yes...it is compulsory...especially when you want to create a layout ;-D
Ashutosh Kumar (1 month ago)
what about css grid
Crazy Circle (1 month ago)
Bro why do you not purchase a mic
Bro sass use in css how to use please made a video
Kamran Siddique (1 month 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 (1 month ago)
Nice
Prabhat kumar (1 month 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 (1 month 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.