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!


========== JavaScript for Beginners Playlist ==========

========== CSS for Beginners Playlist ==========

========== HTML for Beginners Playlist ==========

========== The Net Ninja ============

For more front-end development tutorials & to black-belt your coding skills, head over to – or

========== Social Links ==========

Twitter – @TheNetNinja –


  1. 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! πŸ™‚

  2. 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?

  3. 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

  4. 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.

  5. 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)

  6. 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.

  7. Hello from russia. I understand what you say, but i only see and after i understand what you do. πŸ˜€ 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.

  8. 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?

  9. 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?

  10. 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

  11. 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


Please enter your comment!
Please enter your name here