HomeОбразованиеRelated VideosMore From: The Net Ninja

CSS Positioning Tutorial #4 - Floating Elements

1132 ratings | 81720 views
Hey ninjas, in this CSS Positioning tutorial, I'll introduce you to floating elements. CSS floats are one of the most powerful and widely used CSS positioning properties, but can be a little tricky to get your head around at first! SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1 ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk
Html code for embedding videos on your blog
Text Comments (94)
Nabil Alshad (11 days ago)
can u please tell mee wht the thing is that when write code and get compling reslt at live...
Rick Marsh (20 days ago)
You, sir, have the metabolism of a sparrow. If you could just talk more slowly, and enunciate more clearly, then the people of Canada, Australia, New Zealand, India, all of the United States, and indeed most of remaining Britain, could understand what you're trying to convey.
Steve Allami (22 days ago)
thank you
TBM5K (1 month ago)
Hello, whenever i float the div tags to the left, the footer jumps out of position . What can i do?
TBM5K (1 month ago)
+The Net Ninja Hey man,i fixed the problem. I had not set the overflow property to auto. Thank you for checking out ;)
The Net Ninja (1 month ago)
Hey, are you clearing your floats afterwards? If you don't, content underneath can jump upwards. Use the property 'clear: left;' to clear left floats.
HackZ YoboY (1 month ago)
Heyy Ninja, its been 4 years now since you released this video and a lot of things have changed I think. Just having a query, when u float all the box to left, they are still inside the white area, but in my case, white area's height becomes 20px due to padding of 10px each side, and box height is 100px, this makes these box out of the white area, why is it happening??
AdiTya Dev (1 month ago)
Sam Dave Pollard (3 months ago)
Nice one, Ninja. Thank you.
pazira love (3 months ago)
I watched this series butbcant remember something now. In one of the videos did you say absolute position is relative to the window if we do not set the parent to display relative?
Sam Dave Pollard (3 months ago)
That would be correct. If an element has 'position: absolute' then the positioning values of 'top', 'left' etc position it relative to the nearest ancestor which has a position property set. If there's no such ancestor, then the element is being positioned relative to the html element (or window).
Redoction (3 months ago)
Cool video
Zerox (4 months ago)
Is there any reason why we should use this instead of flexbox?
Matt Berry (4 months ago)
Hahahah, gangsta lorem ipsum had me DYING
Light Vega (5 months ago)
Awesome tutorial
aQuere (5 months ago)
what a nice guy
Moiz M (6 months ago)
You're funny af!
Aytunc Matrac (6 months ago)
great work in this video . thumps up for you
Tricia Norris (6 months ago)
Thanks! I enjoy your tutorials. I am in a coding bootcamp class and it's nice to see the material explained so clear and concise!
Sam Gh. (7 months ago)
float doesn't remove the element from the document flow, it changes its stacking..
The Net Ninja (7 months ago)
Hey, it does stay in the flow, but is removed from the normal flow. Check out this for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/float
Keytron Quabius (8 months ago)
Should you use the box class that way as global. Or is it better practice to create a container of div class=box" and then have your color divs inside them?
Elena Oat (8 months ago)
I don't see the reason of using the float in the last example. Why not just inline-block these three block elements? What is the advantage of using the float in this case? Thanks.
supermashriq (10 months ago)
Great explanation.
Rishikesh ct (10 months ago)
Great Explanation, thanks!!! In case of box when u add a float : left style to red box its overlapping green box which is in document flow, But in image case why image not overlapping paragraph textwhen we apply float : right to it?
Hapri Fud (10 months ago)
thank you so much Sensei!, GBU Sir
Very good and informative thank you so much
Reza Ghochkhani (11 months ago)
What is this editor you are using? It looks interesting and how does it apply changes immediately to the output browser?
Gkn T (11 months ago)
The paragraph does not go behind the cloud image but RGB boxes go (red over green). Can someone explain why?
David (11 months ago)
Thanks a lot!. Wow you are one of the best organized insteuctor in youtube, lessons are perfectly labeled I would gladly hire you for future projects if I need developers soon
PlaidShirts United (11 months ago)
Is class="floatright" a css or HTML command because I'm trying to add it to a <img src="" alt=" width="303" height="252"> command
Semantron (11 months ago)
Woow thanks to you I'm gonna land some front-end job ☺ Joke a side you are a great or the best tutor !
Ramin Rad (1 year ago)
Brilliant explanation! Thank you!
AlexGW (1 year ago)
Ok, I know this is for the seasoned devs but it's important to note that float nowadays is the back compat response to supporting IE - people REALLY should be using/taught display: inline-block as it clears itself (is extremely widespread in terms of support) and adheres to the workflow! Float was never designed for layouts but was the solution when we all took the leap into tableless design looking for solid support.
Harsh (1 year ago)
https://youtu.be/xara4Z1b18I visit this link to get the idea of floats through animation!!
J tons (1 year ago)
Why does the green box go behind the red box. But paragraph text goes to the right of the floated image?
nizwiz ._. (1 year ago)
Enoch Green (1 year ago)
Hey boss! When I maximize the browser the image spills out, can u please help (@3:57)
Somebody Once told ME (1 year ago)
Great tutorial but why learning "float" if exist "Flex" that entirely replaces float?
The Net Ninja (1 year ago)
Hey, thanks. There are some cases where a float may still be useful for say, a small button or icon that needs to be floated next to another element, and where flexbox may be a little overkill.
Adrn Amrfs (1 year ago)
But remember when using floats you can get in a pickle if you try to position them further with fixed, absolute, relative etc
Adrn Amrfs (1 year ago)
Either weird stuff happens or they just don't do anything, I forgot.
Ghayas Ahsan (1 year ago)
your screen brightness is too high
Ruben Garcia (1 year ago)
Excellent, thank you!
Patrick Wade (1 year ago)
hi Net Ninja, i watch all your stuff. in your expert opinion, how would you say these phone screen animations are done? css, sprites, video? http://urban-walks.com/#slides
TechWizPC (1 year ago)
What IDE are you using?
SALDEZ Zak (6 months ago)
Brackets http://brackets.io/
Atakan Bedel (1 year ago)
For start sorry for my bad english. I didn't uderstand while in the first example you have shown us about an image floating next to a text, the text wasn't hidden behind the image, whereas; in the second example, the green box was hidden behind red box. I think the green box should stay next to the red box, but it was hidden behind. Im so confused.Maybe it is a rerlationship between <p> tags and <img> tags. Please enlighten me! :)
Harsh (1 year ago)
bro that's how floats work!! the elements moves to the left and gets floated ie. gets above through some height and due to the free space available ,the elements below it moves upwards in order to fill that vacant space,.....................https://youtu.be/xara4Z1b18I visit this to understand it in detail.
Sam Murray (1 year ago)
was asking myself the same question. if you get the answer, pls let me know. thanks :)
Jiovanni Rosario (1 year ago)
Net Ninja, can you do a course on Responsive Images with Grunt or Gulp?
Ahmed Deghady (1 year ago)
Great tutorial! Wonder how can i get this live html previewing on chrome using mac? Thanks!
陈瀚龙 (1 year ago)
Anyone..how is this working? How is he using .box, .red, etc? The div classes are red box, blue box, etc. How can he only use red or box?
陈瀚龙 (1 year ago)
What's happening when I do the same thing you're doing, but the content busts out of the wrapper?
陈瀚龙 (1 year ago)
Yes mate, amazing. I've been teaching myself for 2 months, watching videos, reading books, and even watched a bunch of Treehouse. No one has done this yet. Also, the only thing I've struggles with is css positioning. No one can explain it well. I think your videos may do the trick. Thanks!
The Net Ninja (1 year ago)
Hey, class="red box" means the element has 2 classes - one of them is 'red' and the other is 'box'. It does not mean 1 single class of 'red box'. It would only be a single class if there are no spaces between the words. For example, class="red-box" or class="redbox". Hope this helps :)
Wilfredo Frenal (1 year ago)
thank you for your lessons...
Stephy Stuff (1 year ago)
can you please explain to me on how to position your links and your buttons to the either left or to the right pages of your bottom screen
Bekzod Buriboev (1 year ago)
Nico v A (1 year ago)
HOW does the page update instantly like that PLEASE tell me i need this in my life :/
Hardik Lakhalani (1 year ago)
How can I put Button inside Text Box? Just like Google's Search bar VOICE INPUT button, which is INSIDE the Textbox PLUS it is Button.
Hardik Lakhalani (1 year ago)
Tried, can't figure out what's wrong!! Please help me out: www.cdpn.io/v/qmrXBb currently I just put background image instead of button.
Hardik Lakhalani (1 year ago)
Can you suggest good forum site for Web Designer? (I thought about Stackoverflow, but it seems for Programmers).
Hardik Lakhalani (1 year ago)
Oh yeah I forgot that offsetting, Thanks man! I already watched that playlist. but did not strike until now. btw, I tried Brackets. Live integration doesn't work sometimes, So I'm using Dreamweaver. and it Rocks. FYI, THIS Playlist is Not listed in your Channel Playlists Page along with other CSS PlayList. Add It. I particularly searched for this and then came here. Subscribed. I just started learning HTML & CSS. You will be great companion from now on.
The Net Ninja (1 year ago)
Hey, you could use position absolute, to absolutely position an element over another - this is how Google does it. For example: <div id="input-container"> <input type="text" /> <div id="your-button">button img or text</div> </div> You could give the container a position of relative. Span the input field 100% in width & position the 'your-button' div absolutely over the right side of the input field. I cover both relative and absolute position later in this playlist!
yasin latief (1 year ago)
too good
Felipe Borelli (1 year ago)
in those last 3 boxes, how would you put the text exactly in the middle of it? (given that, as it shows, it's positioned in the top center)
Felipe Borelli (1 year ago)
Hey there! I'll try the flexbox approach you've mentioned! I really appreciate your input. Thanks!
Box88 (1 year ago)
Hey Felipe, There are little tricks using position:relative and the transformY property to achieve the text directly in the centre.. However, I would recommend using flexbox to centre the content, its much easier and tends to be the way to do it these days.. Apply "display: flex" to the parent div and "margin: auto" to the element itself should result in a perfectly centred element. p.s im also just learning so there might be other ways to achieve without using flexbox..
Fëanor Wind (1 year ago)
I'm new to CSS. On 5:00, he sets width property for .box class, but I couldn't see any class="box" on the html codes. How is this possible? Maybe I just haven't paid enough attention.
Rui Wang (6 months ago)
Thanks! I also feel confused about this point here
Fëanor Wind (1 year ago)
sa Jo Thank you :)
sa Jo (1 year ago)
the class names used are "blue box", "red box" and "green box" , when he used .box then the properties mentioned got applied to all three div's and when he used .blue, .red and .green then the properties got applied to the div whose class name consisted of red green or blue. This is a way of selecting classes.
rot rose (1 year ago)
Great, your lesson never fail to impress me. Thank you.
abandoned failer (1 month ago)
you insane? he is talking to himself, the keybaord.is audible and.
Pavel (2 years ago)
Hello from russia. I understand what you say, but i only see and after i understand what you do. :D haha thanks man:) you must know, what in Russia not have good tutorial... really. you very good, befory this video you packing material ( code ) i see this you work. it really good.
snocheeks (2 years ago)
Quick question, in the last example why not change the display to inline/ inline-block and then proceed with stylings?
Peter Braun (5 months ago)
I thought the same thing It might be useful in cases where inline-block isn't supported by a target browser, but this shouldn't happen anymore
Ari (2 years ago)
Hi! Thanks for this wideo :) I have a question: WHY in 05:07 the blue box is at the same level as red box? Why the blue box after adding "float: right;" didnt come higher than red box? In "div" blue box its higher that "div" with red box ... Im confused. :( Its not a normal website flow as on the example with image in 02:43?
Safraz Hamid (2 years ago)
clear, concise tutelage
Wayne Holmes (2 years ago)
Thankyou for making the subject so easy to understand.
Lee Pinnguin (2 years ago)
how do you float one box in the dead middle? even if it is the only box. Also the div container, does it automatically adjust it's size if the person resize the webpage it was on or do the letters in the box or box go all crazy?
JayKnowMore (2 years ago)
you are the best tutor ive come accross on youtube. i have request can you make a tutorial about learning code? what i mean is whenever i learn new code i forgot it after 5 minutes or so. can u make a tutorial about learning and not forget
Immortal Wombat (1 month ago)
Yes, you have to build things with the code in order to remember it better. The act of typing stuff out alone will increase retention rate massively.
Del Piero (11 months ago)
You need practice everyday until you don't forget
elmeri pälikkö (1 year ago)
You have to find use for it. Write a snippet of code with the stuff you just learned and you find it will stay on your mind much easier
Siaka Doumbia (2 years ago)
what editor is this?! it is really cool to see the changes real time
Siaka Doumbia (2 years ago)
Thank you , downloaded it,it just makes life so easier
The Net Ninja (2 years ago)
It's called Brackets - you can get it from brackets.io . However, I've moved onto Atom editor these days which is also pretty cool!
Ankit Tiwary (2 years ago)
width=29.33% is how many pixel which you used in this tutorial and where we should make use of % in margin and px in margin
Immortal Wombat (1 month ago)
the number of pixels depends on the size of the browser window/screen. So if the window is 1000 pixels then each one will be 299.3 pixels (29.33% of 1000px).
Gkn T (11 months ago)
you have 3 elements. 100/3=33.3 ...so 29.33 + (margin for both sides = 2) + (padding for both sides = 2) )= 33.33
予言 (2 years ago)
This is so educational! Keep it up! :D
Martin (3 years ago)
Awesome video! I just asked a question, then got the answer in your video lol so I deleted it :P

Would you like to comment?

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