CSS Positioning Tutorial #4 - Floating Elements

แชร์
ฝัง
  • เผยแพร่เมื่อ 13 ม.ค. 2025

ความคิดเห็น • 171

  • @pokadoodledoo9580
    @pokadoodledoo9580 3 ปีที่แล้ว +1

    I went through a codecademy course and watched 3 other videos and did not understand until I came here. Thank you so much for explaining!

  • @AlexGW
    @AlexGW 7 ปีที่แล้ว +11

    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.

    • @JoaoVitorBRgomes
      @JoaoVitorBRgomes ปีที่แล้ว +1

      Indeed, I tried what you wrote and it is more practical using inline-block because it already set good margins between elements

    • @dede-314
      @dede-314 ปีที่แล้ว +1

      My instructor told us that there are better methods than float but unfortunately some companies still use floats so we should know how to use it for layouts too.

  • @rotrose7531
    @rotrose7531 7 ปีที่แล้ว +34

    Great, your lesson never fail to impress me. Thank you.

  • @Ensomniac.brrrdy
    @Ensomniac.brrrdy 4 ปีที่แล้ว +1

    Very comprehensive explanation on float. I was scratching my head why it didn't have same interaction like with image but this clears it up!

  • @duvalandunited
    @duvalandunited 6 ปีที่แล้ว +5

    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!

  • @matthewcannon642
    @matthewcannon642 5 ปีที่แล้ว +2

    Thanks for the help. I've been reading a textbook that's pretty great, but your video is the "icing on the cake". Thank you! Keep making great content.

  • @Normanabutler1
    @Normanabutler1 5 ปีที่แล้ว +4

    Another brilliant tutorial!!! Thank you! You explain things so easily!

  • @leonelleonardis9564
    @leonelleonardis9564 8 หลายเดือนก่อน

    You are a legend, mate. Greetings from Argentina.

  • @Ari-vt3po
    @Ari-vt3po 8 ปีที่แล้ว +9

    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?

    • @st.altair4936
      @st.altair4936 4 ปีที่แล้ว +1

      A bit late, but the blue box isn't above the red one because the float property alters the document flow so the red and green box takes up the now free space that is above them

    • @glentan6173
      @glentan6173 3 ปีที่แล้ว +2

      @@st.altair4936 A bit late too, but how come the cloud img given float left isn't in front of the paragraph but the green box is behind the red box??

  • @VinayRaibhu
    @VinayRaibhu 3 ปีที่แล้ว

    Great man...now I have a clear idea about float

  • @jayknowmore854
    @jayknowmore854 8 ปีที่แล้ว +11

    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

    • @elmeripalikko3931
      @elmeripalikko3931 7 ปีที่แล้ว +3

      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

    • @DelPieroJoga10
      @DelPieroJoga10 6 ปีที่แล้ว +2

      You need practice everyday until you don't forget

    • @immortalwombat7095
      @immortalwombat7095 6 ปีที่แล้ว

      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.

  • @sahildhawan22
    @sahildhawan22 4 ปีที่แล้ว

    @The Net Ninja: At 6:05 why did the green box got behind the red one? Shouldn't the green box come immediately on the right of the red box because green box is still part of normal document flow?

  • @ignaciohernandezcorrea5385
    @ignaciohernandezcorrea5385 4 ปีที่แล้ว

    Thank you!! this is literally what I was needing, I was using tables pretending to get what you done in this video.

  • @digigoliath
    @digigoliath 5 ปีที่แล้ว +1

    Very helpful tutorial to explain the concept & implementation of FLOAT. Nice examples too! Thank you!!

  • @rishikeshct4502
    @rishikeshct4502 6 ปีที่แล้ว +22

    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?

    • @umarjaved1489
      @umarjaved1489 3 ปีที่แล้ว

      have you got its answer?

    • @parthipanchandrasekeran5579
      @parthipanchandrasekeran5579 3 ปีที่แล้ว

      Does anyone have an answer for this ?

    • @pravalkapoor7826
      @pravalkapoor7826 3 ปีที่แล้ว

      This is what I was wondering about too. Fortunately, I found this explanation demonstrated in the first 5 minutes of this youtube video: th-cam.com/video/LrdkRMZhgZg/w-d-xo.html.
      To give you a short and direct answer: Actually the BOX containing the text is indeed BEHIND the cloud image (just give the paragraph a background-color and you will see that this is true). In general, floated elements are being lifted up and bring elements underneath them. The tricky/weird part is: text itself does not go underneath such floated elements. Period. That's counterintuitive, but that's simply how float works. I guess after some practice you will just remember this little and not so intuitive behavior :)

  • @chynex03
    @chynex03 4 ปีที่แล้ว +1

    Where did the .box selector at 4:24 come from...Is it because all of the classes ended in box?

  • @GameNon-Quitters
    @GameNon-Quitters 6 ปีที่แล้ว +1

    Woow thanks to you I'm gonna land some front-end job ☺ Joke a side you are a great or the best tutor !

  • @David-xd1ii
    @David-xd1ii 6 ปีที่แล้ว

    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

  • @anacosic6041
    @anacosic6041 3 ปีที่แล้ว

    great lesson!! Exactly what I was looking for last couple of days :D

  • @giulia6930
    @giulia6930 2 ปีที่แล้ว

    Thank you so much, I was looking for a clear explanation 🙏

  • @snocheeks
    @snocheeks 8 ปีที่แล้ว +7

    Quick question, in the last example why not change the display to inline/ inline-block and then proceed with stylings?

    • @CrystalMaidenFeetLover86
      @CrystalMaidenFeetLover86 6 ปีที่แล้ว +2

      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

    • @nikhilsonune618
      @nikhilsonune618 3 ปีที่แล้ว

      That's one way to position. This is another. Display inline block keeps 4px margin by default in chrome and modern browsers. You need to clear it as well. Float property was initially created to wrap text around images.

  • @gknt3172
    @gknt3172 6 ปีที่แล้ว +8

    The paragraph does not go behind the cloud image but RGB boxes go (red over green). Can someone explain why?

    • @smithcodes1243
      @smithcodes1243 5 ปีที่แล้ว

      Because the image is an inline-block element I guess.

    • @anantshekhar698
      @anantshekhar698 4 ปีที่แล้ว

      exactly my question

  • @itsjmmariano
    @itsjmmariano 3 ปีที่แล้ว

    Amazing explanation. Quite impressive. Thank you!

  • @wayneholmes5687
    @wayneholmes5687 8 ปีที่แล้ว

    Thankyou for making the subject so easy to understand.

  • @anushkashah9924
    @anushkashah9924 4 ปีที่แล้ว

    Hi, I am a noob and I got one doubt here !
    After 3:00 the image is floated to left and the text is there , then considering that image is taken out of regular content flow shouldn't it be the case that the text too starts from left hand side and should be below or on top of image. But in this case it starts right after the image from right side , I mean how is this possible?????Is it something due to " wrapper : after " ??

  • @AytuncMatrac
    @AytuncMatrac 6 ปีที่แล้ว +1

    great work in this video . thumps up for you

  • @Spiegeldondi
    @Spiegeldondi 4 ปีที่แล้ว

    simple yet grandiose. thank you.

  • @nouraizasad4401
    @nouraizasad4401 5 ปีที่แล้ว

    This is the old (though still valid) way of arranging boxes the way you did. CSS Grid and Flexbox are much nicer options now that CSS3 has been released.

  • @stepan.furman
    @stepan.furman 4 ปีที่แล้ว

    Cool! Thanks for this awesome tutorial!

  • @raminrad666
    @raminrad666 7 ปีที่แล้ว +1

    Brilliant explanation! Thank you!

  • @safrazhamid4784
    @safrazhamid4784 8 ปีที่แล้ว +2

    clear, concise tutelage

  • @levietuc3792
    @levietuc3792 4 ปีที่แล้ว

    That was very helpful ! thank you very much !

  • @Martin958
    @Martin958 4 ปีที่แล้ว

    5:41 you have a small green line still appearing under your red box. My browser doesn't show this. Why is there a difference? And why did it show at all on yours?

    • @harvirreturn
      @harvirreturn 4 ปีที่แล้ว

      every browser has their own compatibility to the html/css/javascript code.

  • @amirkamalian8045
    @amirkamalian8045 6 ปีที่แล้ว

    Very good and informative thank you so much

  • @jelodev-j1f
    @jelodev-j1f 8 ปีที่แล้ว +2

    This is so educational! Keep it up! :D

    • @ikaros9727
      @ikaros9727 5 ปีที่แล้ว

      Liked for the Ahagon Picture ^^

  • @enochgreen2265
    @enochgreen2265 7 ปีที่แล้ว

    Hey boss! When I maximize the browser the image spills out, can u please help (@3:57)

  • @samdavepollard
    @samdavepollard 6 ปีที่แล้ว

    Nice one, Ninja.
    Thank you.

  • @jtons7201
    @jtons7201 7 ปีที่แล้ว +2

    Why does the green box go behind the red box. But paragraph text goes to the right of the floated image?

    • @BKofficer23
      @BKofficer23 5 ปีที่แล้ว

      I think because both and are inline, whereas the are blocks. Just a guess though, must have something to do with the document flow.

    • @sayandutta4264
      @sayandutta4264 3 ปีที่แล้ว

      Since the float property is being applied on the red div, it floats and overlays on the green div and the green div stays where it was. However, if the green div was applied with the float property before it was applied to red one, the overlay wouldn't have happened.

  • @thstudio007
    @thstudio007 4 ปีที่แล้ว

    Nicely explained. Thanks a lot :)

  • @mamad7976
    @mamad7976 4 ปีที่แล้ว

    9:25 That looks fine right now, but the next thing you make will go inside those boxes. Unless you make them float:left; too. And that means you have to make everything float:left; and that ruins it. This is the problem that I never found a way to fix. :(

    • @nobunagaoda8439
      @nobunagaoda8439 3 ปีที่แล้ว

      May be late but theres clear options you can add below float which will not let other objects go inside the floated ones, it will give it margin and move em away

    • @mamad7976
      @mamad7976 3 ปีที่แล้ว

      @@nobunagaoda8439 I appreciate your answer

  • @Royale3533
    @Royale3533 4 ปีที่แล้ว

    What's the difference (if any) between floating left on block elements (as shown here) and just setting them as inline-block elements?

  • @ewolz
    @ewolz 4 ปีที่แล้ว +1

    Hey great video! which text editor do you use? I would like to see my html and browser in real time

    • @2416-s3f
      @2416-s3f 4 ปีที่แล้ว

      It is Brackets, brackets.io/

  • @tsarNoir
    @tsarNoir 4 ปีที่แล้ว

    does all of h2 and p tags are block elements or inline? you said in the previous video that block elements stack top to bottom and inline and inline-block stacks left to right. Can we use float instead of display: inline-block for stacking left to right?? Sorry if this is a silly question.

  • @supermashriq
    @supermashriq 6 ปีที่แล้ว

    Great explanation.

  • @rubengarcia4119
    @rubengarcia4119 7 ปีที่แล้ว

    Excellent, thank you!

  • @ignacywojdylo6687
    @ignacywojdylo6687 5 ปีที่แล้ว

    Hi there, brilliant tutorial. I have a question: When I float all three boxes to the left, suddenly the wrapper box goes back to its original height, and stays behind the boxes, rather than wrap around them like it does in the vid. I can't see which part of the code I missed when copying. Any ideas?

  • @kotik1221
    @kotik1221 6 ปีที่แล้ว

    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.

  • @leepinnguin9682
    @leepinnguin9682 8 ปีที่แล้ว

    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?

  • @yamacode9958
    @yamacode9958 6 ปีที่แล้ว +1

    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?

    • @samdavepollard
      @samdavepollard 6 ปีที่แล้ว +1

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

  • @Technolabinc
    @Technolabinc 4 ปีที่แล้ว

    How do you run a local server to show your changes kinda live as you go on the browser?
    Instead of needing to go to the browser and click refresh or F5?
    Thank you!

  • @PRATIK1900
    @PRATIK1900 5 ปีที่แล้ว

    what is the difference between using float for stacking images (or anything) horizontally, vs using things like flex, or grid?
    (CAN we actually use flex or grid to arrange images this way? i'm new and confused lol)
    Anyway, great content, helped me a lot man :)

  • @mayankchauhan9230
    @mayankchauhan9230 4 ปีที่แล้ว

    sir... could you recommend c, or c++ programming language tutorial like this?

  • @stephystuff2955
    @stephystuff2955 7 ปีที่แล้ว

    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

  • @anantshekhar698
    @anantshekhar698 4 ปีที่แล้ว

    when u set image's float property as left, the paragraph below it didn't go behind the image but that green box did?? How so??

  • @ankittiwary3712
    @ankittiwary3712 8 ปีที่แล้ว +2

    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

    • @gknt3172
      @gknt3172 6 ปีที่แล้ว

      you have 3 elements. 100/3=33.3 ...so 29.33 + (margin for both sides = 2) + (padding for both sides = 2) )= 33.33

    • @immortalwombat7095
      @immortalwombat7095 6 ปีที่แล้ว

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

  • @SilenceHurtsMore
    @SilenceHurtsMore 4 ปีที่แล้ว

    Can you change the shape of you boxes to customized shapes?

  • @mangeshmahajan4445
    @mangeshmahajan4445 4 ปีที่แล้ว

    Thanks for this. How did you get those blue boxes around elements?

  • @haprifud2220
    @haprifud2220 6 ปีที่แล้ว

    thank you so much Sensei!, GBU Sir

  • @Bl00obs
    @Bl00obs 6 ปีที่แล้ว

    Is class="floatright" a css or HTML command because I'm trying to add it to a

  • @somebodyoncetoldme6777
    @somebodyoncetoldme6777 7 ปีที่แล้ว +2

    Great tutorial but why learning "float" if exist "Flex" that entirely replaces float?

    • @NetNinja
      @NetNinja  7 ปีที่แล้ว +7

      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.

  • @AgrabATC
    @AgrabATC 4 ปีที่แล้ว

    Hi there, how can I have the blue container live when u select any tag on HTML, or any selector on CSS, it's so cool and helpful!!
    PS: I use vscode with live server.
    Thanks

  • @rezaghochkhani8505
    @rezaghochkhani8505 6 ปีที่แล้ว

    What is this editor you are using?
    It looks interesting and how does it apply changes immediately to the output browser?

  • @charandp2136
    @charandp2136 4 ปีที่แล้ว

    i want to implement navbar to left and product pricing card to right but content are overlapping how can i solve it

  • @ahmeddeghady4510
    @ahmeddeghady4510 7 ปีที่แล้ว

    Great tutorial! Wonder how can i get this live html previewing on chrome using mac?
    Thanks!

  • @mattberry3983
    @mattberry3983 6 ปีที่แล้ว +1

    Hahahah, gangsta lorem ipsum had me DYING

  • @zeroxcrusher
    @zeroxcrusher 6 ปีที่แล้ว

    Is there any reason why we should use this instead of flexbox?

  • @VITORB82
    @VITORB82 4 ปีที่แล้ว

    On the 1st example why did the text P did not go behind the image?

  • @wilfredofrenal3824
    @wilfredofrenal3824 7 ปีที่แล้ว

    thank you for your lessons...

  • @mayursaroj4360
    @mayursaroj4360 5 ปีที่แล้ว

    Awesome ❤

  • @atakanbedel5418
    @atakanbedel5418 7 ปีที่แล้ว

    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 tags and tags. Please enlighten me! :)

    • @lukaszwojda4678
      @lukaszwojda4678 7 ปีที่แล้ว

      was asking myself the same question. if you get the answer, pls let me know. thanks :)

    • @harsh9509
      @harsh9509 7 ปีที่แล้ว

      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,.....................th-cam.com/video/xara4Z1b18I/w-d-xo.html visit this to understand it in detail.

  • @nabilalshad6404
    @nabilalshad6404 6 ปีที่แล้ว

    can u please tell mee wht the thing is that when write code and get compling reslt at live...

  • @milosleng1175
    @milosleng1175 4 ปีที่แล้ว

    great tut

  • @foulx
    @foulx 7 ปีที่แล้ว

    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)

    • @AP-cg2yc
      @AP-cg2yc 7 ปีที่แล้ว

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

    • @foulx
      @foulx 7 ปีที่แล้ว

      Hey there!
      I'll try the flexbox approach you've mentioned! I really appreciate your input. Thanks!

  • @shaymahameed7786
    @shaymahameed7786 4 ปีที่แล้ว

    Amazing!!!! Thanks

  • @nithishd6420
    @nithishd6420 4 ปีที่แล้ว

    what is the difference between width and max-width?

  • @izaak791
    @izaak791 8 ปีที่แล้ว +1

    what editor is this?! it is really cool to see the changes real time

    • @NetNinja
      @NetNinja  8 ปีที่แล้ว +2

      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!

    • @izaak791
      @izaak791 8 ปีที่แล้ว

      Thank you , downloaded it,it just makes life so easier

  • @shakib_04
    @shakib_04 5 ปีที่แล้ว

    why you use after on .wrap? can anyone answer me?

  • @wayneswildworld
    @wayneswildworld 4 ปีที่แล้ว

    Why doesn't the text float under the cloud picture when we float it?

  • @dianaodintsov4371
    @dianaodintsov4371 5 ปีที่แล้ว

    Hey why you use brackets and not sublime text ?

  • @harmanasylum9108
    @harmanasylum9108 4 ปีที่แล้ว

    Hello netninja sir can anyone tell me diff b/w float and display property

  • @hadmeinthefirsthalfngl2717
    @hadmeinthefirsthalfngl2717 4 ปีที่แล้ว

    How is the page automatically updating in the browser??

  • @secundus6457
    @secundus6457 3 ปีที่แล้ว

    Thank you!

  • @techwizpc4484
    @techwizpc4484 7 ปีที่แล้ว +2

    What IDE are you using?

  • @marius4893
    @marius4893 6 ปีที่แล้ว

    Cool video

  • @hackzyoboy2459
    @hackzyoboy2459 6 ปีที่แล้ว

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

    • @ebukaoraezu
      @ebukaoraezu 4 วันที่ผ่านมา

      I'm experiencing similar problems. Did you eventually find a way to solve it ?

  • @hardiklakhalani6268
    @hardiklakhalani6268 7 ปีที่แล้ว

    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.

    • @NetNinja
      @NetNinja  7 ปีที่แล้ว

      Hey, you could use position absolute, to absolutely position an element over another - this is how Google does it. For example:
      button img or text
      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!

    • @hardiklakhalani6268
      @hardiklakhalani6268 7 ปีที่แล้ว

      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.

    • @hardiklakhalani6268
      @hardiklakhalani6268 7 ปีที่แล้ว

      Can you suggest good forum site for Web Designer? (I thought about Stackoverflow, but it seems for Programmers).

    • @hardiklakhalani6268
      @hardiklakhalani6268 7 ปีที่แล้ว

      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.

  • @MartinBenes66
    @MartinBenes66 9 ปีที่แล้ว

    Awesome video! I just asked a question, then got the answer in your video lol so I deleted it :P

  • @tbm5k
    @tbm5k 6 ปีที่แล้ว

    Hello, whenever i float the div tags to the left, the footer jumps out of position . What can i do?

    • @NetNinja
      @NetNinja  6 ปีที่แล้ว

      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.

    • @tbm5k
      @tbm5k 6 ปีที่แล้ว

      @@NetNinja Hey man,i fixed the problem. I had not set the overflow property to auto. Thank you for checking out ;)

  • @lightvega1800
    @lightvega1800 6 ปีที่แล้ว

    Awesome tutorial

  • @adrianamorphous
    @adrianamorphous 7 ปีที่แล้ว

    But remember when using floats you can get in a pickle if you try to position them further with fixed, absolute, relative etc

    • @adrianamorphous
      @adrianamorphous 7 ปีที่แล้ว

      Either weird stuff happens or they just don't do anything, I forgot.

  • @phonk-lab
    @phonk-lab 7 ปีที่แล้ว

    HOW does the page update instantly like that PLEASE tell me i need this in my life :/

  • @roachreacher4326
    @roachreacher4326 4 ปีที่แล้ว +1

    29%+1%+1%

  • @franchisamuele
    @franchisamuele 3 ปีที่แล้ว

    How your browser auto-refreshes?

  • @adityadev2825
    @adityadev2825 6 ปีที่แล้ว

    Awesome

  • @music_punch5490
    @music_punch5490 7 ปีที่แล้ว +1

    too good

  • @kikrik97
    @kikrik97 4 ปีที่แล้ว

    Can't display div inside div

  • @陈瀚龙
    @陈瀚龙 7 ปีที่แล้ว

    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?

    • @NetNinja
      @NetNinja  7 ปีที่แล้ว +3

      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 :)

    • @陈瀚龙
      @陈瀚龙 7 ปีที่แล้ว

      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!

    • @陈瀚龙
      @陈瀚龙 7 ปีที่แล้ว

      What's happening when I do the same thing you're doing, but the content busts out of the wrapper?

    • @ebukaoraezu
      @ebukaoraezu 4 วันที่ผ่านมา

      ​@@陈瀚龙 yo, having the same issues here. Anyway around it

  • @Mustafa-cv1pk
    @Mustafa-cv1pk 6 ปีที่แล้ว

    thank you

  • @aquere
    @aquere 6 ปีที่แล้ว

    what a nice guy

  • @imamanonly
    @imamanonly 3 ปีที่แล้ว

    British ninja