HomeОбразованиеRelated VideosMore From: ob wex

Introducing Divs and controlling them with classes and ids

852 ratings | 110237 views
An exploration of Divs and how to control and position them with default relative positioning. Also how to control shared and unique properties through classes and ids to have your CSS code as efficient as possible.
Html code for embedding videos on your blog
Text Comments (80)
TheOneTheOnly (22 days ago)
whats the craic, cheers for the tutorial ^^
ob wex (22 days ago)
Craic's mighty! Thanks.
Acryfox cz lp (23 days ago)
I have only one problem. I am making a page with links on another web page with pictures, name and description. It works but I have problem with second borderd. It's on the right side of page but I want it under first. And when I tried repair it margin:200px; and bottom orientation it move with secondary class without any reason.
Eduardo Bueno (1 month ago)
You are so calm, no irritating music, and what you do makes sense! This is what I needed. It makes it seem very basic, but it has a lot in it. I loved it! Thanks!
Lauren Cover (1 month ago)
This was super helpful! Thank you so much!
ob wex (1 month ago)
Yuri Dork05 (2 months ago)
Thank you for the awesome tutorial!😁
Sruthi Gopi (2 months ago)
plzzzzzzzzzz can u send me the code I need it for the project....plzzzzzzzzzz email id: [email protected]
DBNROP (4 months ago)
Figured it out... I just had to put float left on all the unique classes instead of the unique ID... but now my problem is... I use overflow auto, so that the paragraphs is contain within the height of the div.. but this adds ugly scroll bars... how can I achieve the same effect, without the scroll bar? or how can I style the scroll bar to look nicer?
DBNROP (4 months ago)
I have 10 divs with unique classes , and paragraphs inside them, wrapped around a unique ID... All have same width and height, and color... but when I float to the left, it doesn't float, it just stays from up to bottom... Help?
JIKUU BEST MATCH (6 months ago)
Man those squares are so early 2000s
ob wex (6 months ago)
I hear you man...for pedagogical purposes only!
Karo (7 months ago)
Thanks man, that helped me a lot!
surbir veer (8 months ago)
Great job thanks
Muhammad Suleman (9 months ago)
When i gave float:left then one of the hide behind the first one. And the other one comes following the downward by following previous one. They won't placed side by side? why
Mounika Kaspa (10 months ago)
I am not getting spaces between two boxes.
ob wex (10 months ago)
+Mounika Kaspa the spaces between the boxes are set with a margin property.
Tornike (10 months ago)
not working
Tornike (10 months ago)
Yeah worked this time, thanks.
ob wex (10 months ago)
Yes it is working.
Zoltán Berkula (10 months ago)
it's stylesheet not stylesheesh
Sudharshan Rao B (1 year ago)
itmoin2012 drive (1 year ago)
Basic is best. This is one of the example of Basic Div. Carry on.
Mark Nem (1 year ago)
Good job
Blank Pyramids (1 year ago)
Great example!! Thank you!
Briap Deum (1 year ago)
Great job, my dude i finally make it work!!
Michael Knox (1 year ago)
This is excellent. You explains things really well. So I subscribed too. There are others on youtube but they talk a load of shite..
hamid mohajir (1 year ago)
Amazing and easy to the point explanation. Thank you.
Nathan Wavichian (1 year ago)
Thank you Ob Wex! very easily understood. You made coding looks friendly for novices like myself.
bhushan kulkarni (1 year ago)
didnt get you
Elias Housseini (1 year ago)
do you accept cookies as donations :D
Leire K (1 year ago)
Very well explained, thank you!
11swallowedinthesea (1 year ago)
Very well explained! Thank you ob wex!
jean reynold (1 year ago)
Thanks for the tutorial. Can we get the code.
Zanzara Loggan (1 year ago)
Really nice
larning newthing (1 year ago)
very help full video thanks man god bliss you.
Joy Liasu (1 year ago)
brilliant - thanks x
olga krakovska (1 year ago)
Great video and nice accent! ^_^ xx
nitesh singh (1 year ago)
Thanks a lot. It really helped me..keep uploading.
Mian Adeel (1 year ago)
i wanna build a dummy facebook singup page and while build the page i fce a lot of problems using div tag when i use float then 2 or 3 divs are goes out side of the div. Help me !! i'm in Trouble :)
ob wex (1 year ago)
This is a very specific question that will be difficult to answer over comments. Remember there are other layout options nowadays as well as float. Flex box and grid are two new layout options that may suit.
Mian Adeel (1 year ago)
Good Job, Really helpful.
Josh Clemons (1 year ago)
excellent video 5star review for helping me understand something that I previously didn't understand! :)
Mohit Garg (1 year ago)
Hanamant kj (1 year ago)
Nice video.. I have one div with box within that text content..there is hover property on border of box..now when I hover on border text content shrink ing(small shift)..how to avoid shift of text....
DJ Giant Bird (1 year ago)
Boi why you legit a dog?
kevfla (1 year ago)
Thank you! But how can I make the squares to be centered on the page and not left?
kevfla (1 year ago)
ob wex thank you!
ob wex (1 year ago)
On the wrapper container set margin-right and margin-left to auto and make sure there is a width set on it. width:510px; margin-left:auto; margin-right:auto;
Radu Elf (1 year ago)
why didn't you put #div.first or .div.content(for classes) ? Is it the same thing?
VIRUL MEDIA (1 year ago)
Hi dear....Its very good lesson...may i ask a doubt...? Can you explain how to arrange the table side by side in different sizes...? I saw in this tutorial that when you changed the size of Container size, all boxes became big same time...I would like to know how can we control the size of the each boxes in different measurements?
A Rod (2 years ago)
I was seriously lost with divs in my class. Found them intimidating as the class was moving so fast. This video has made it so easy and such a good way to explain divs, class and id's in one video! Life saver! Thank you!
Awesome demonstration to show something that had been a bit murky for a while for me and I was just sort of 'winging' it in my development projects! This was crystal clear, thank you for such a great explanation! You're a diamond mate. Much love :) <3
yoyo joe (2 years ago)
An excellent presentation that I found was a clear, succinct, crisp explanation that has helped to lay a useful, and memorable, foundation with this aspect of my 'studies'; many thanks for sharing this. Ahmed Balfaqih, good suggestion, gets my vote also.
Vijay Maurya (2 years ago)
thank you very much
danibitt59 (2 years ago)
WASEEM SADIQ (2 years ago)
thanks bro just because today solve biiiiig thing thanks :)
CYRIL MAIDEN EBOJO (2 years ago)
Thank you =)))
Klate Wilson (2 years ago)
At last, I FINALLY found someone who explained the ID/Class thing so I could understand it
Elizabeth Kraemer (2 years ago)
Vod Vandorin (2 years ago)
I learnt a lot from this tutorial thanks
Ima SuperPerson (2 years ago)
All these are done on fucking Macs. That's how you know the videos are done by script kiddies. These really don't help experienced developers, and it only encourages noobs to use Macs - which is just plain wrong.
Ima SuperPerson (1 year ago)
+Miguel C - Seriously, on the level - I've been a Microsoft / PC type guy for over 30 years.  Lately, Microsoft sucks balls.  I have a company that does a lot of web services, web apps and phone apps, and we are looking at going with Linux on the back-end servers.  I don't know what we're going to do yet on the web app front-end.  I don't like the MVC version of ASP.  Our big problem is finding a suitable replacement for MS SQL that has both performance and doesn't kill the budget.  All this crap has to work together.  Apple is still very dictatorial - and expensive - for producing iPhone apps.  They should make a dev platform for PCs that works.
Miguel C (1 year ago)
+Ima SuperPerson What do you use then ?
Ima SuperPerson (1 year ago)
+Miguel C Real devs don't use Macs.  Kids use Macs.
Miguel C (1 year ago)
No you idiot, Macs are unix derivatives that has a lot of software supporting it, that's the only reason devs use it.
Fazlur Rahman (2 years ago)
beginner use pc but expert use mac but hacker use any os on mac ;)
Sarah Covington (2 years ago)
Thank you I think it may of finally clicked.
Sav Anonymous (3 years ago)
very helpful keep it up,i like the way how you simplify everything
Schatzliste (3 years ago)
hands down one of the best tutorials on youtube. Have you considered doing this for a living? Your voice is soothing and your accent cute and motivating. everything is structured in a really understandable fashion. thank you so much for this, it helped me greatly <3
ob wex (3 years ago)
+Schatzliste The most feel good comment i've ever received I think! I'm going out the door ready to take on the world this Friday morning! Thanks.
Ahmed Balfaqih (3 years ago)
Great tutorials. Keep it up. Try to come up with a complete project across a number of videos. Thank you very much.
ob wex (3 years ago)
Great idea. It would be easier to put all parts into an overall context..
TheKolacic (3 years ago)
hey, how to put them on centar of the screen, can i use vertical-align:center; or what?
Kråke Bolle (2 years ago)
+ob wex Or just margin: 0 auto;?
ob wex (3 years ago)
+TheKolacic They'll need to be put in a wrapper div. Then set the following properties with example values: width:60%; margin-left:auto; margin-right:auto;
devilevic (4 years ago)
Great job, thank you!
L G (4 years ago)
Thank you for taking the time to review the use of Divs ob wex. Nice job. You can never review the use of Divs enough.

Would you like to comment?

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