HomeХобби и стильRelated VideosMore From: let's code!

Making Divs Side by Side using CSS

629 ratings | 170258 views
Make two divs side by side using Float property in CSS Hey guys in this tutorial I will show you how to make two (2) div tags in HTML side by side using the float property in CSS. I will be using Dreamweaver CS6 in this tutorial but you could use any free HTML editor you want including Notepad ++ , Coda or others. Difficulty: Easy Make sure you comment rate and subscribe. link to video : http://www.youtube.com/watch?v=MUApnJ3y-Bs !-------CHANNEL--------------! http://youtube.com/how2cre8webs
Html code for embedding videos on your blog
Text Comments (149)
Raju Khipal (5 days ago)
Why your voice like that u are speaking through mobile
Shedhead (29 days ago)
Thanks for that, most helpful.
Technical World (2 months ago)
It really helps me
Arfan Wahlah20 (3 months ago)
how can i make 2 div up and down ?
Erika Paez (3 months ago)
Thanks so much, really clear and simple - first time managed to do this (after long time trying).
SnaY (4 months ago)
old is gold.
Dereje Desta (6 months ago)
thankyou!
Samantha Banks (6 months ago)
Thank you for the clarification, I want to put a <ul> and <ol> tags side by side. Would this demo work for that?
Poke Gamer (7 months ago)
I DONT WORK
mickmon (8 months ago)
HTMHELL
Habib Jalal (8 months ago)
but u didn't removed the spaces
Aaron Johnson (8 months ago)
That's extremely helpful!
OyiboMarket Worldwide (9 months ago)
Thank Bro.. You Helped me save time. been on my own for hours. keep it up. bless you
Michael Pasek (10 months ago)
thanks man!
FARAZ ANSARI (10 months ago)
thanks brother.. god bless you!
Siddhesh Rumade (11 months ago)
Thank you.
Marianito Barona (11 months ago)
thanks bro really saves my asses
Deirdre O'Loughlin (1 year ago)
Very good
Jatin sharma (1 year ago)
Thank you so much bro.. ❤️
JIKUU BEST MATCH (1 year ago)
How old is this version? 2005?
yagnesh suthar (1 year ago)
Wow... Nice tutorial You have explained very simply and easily...😊
Daniel Morgan (1 year ago)
Wow! Thanks that was really helpful!
Groovychanty JA (1 year ago)
This was simple and straightforward. Exactly what I was looking for.
Jay El (1 year ago)
what software you are using in editing html?
Shrayus Masanam (7 months ago)
Adobe Dreamweaver c6
Qasim Abrar (1 year ago)
What software are you using?
Ptmp727 (1 year ago)
Good video, but it would be a better example to have shown a responsive design, this kind of fixed layout is redundant now
Bhuvana Tabatahalli (1 year ago)
Thank you :-)
Latha Nelapati (1 year ago)
Hi Thanks for the Tutorial. I have a QUESTION. What is there is another image. Say 3 imgages side by side, What CSS code do you write for this? or say there are 4. what will be the CSS?
Ravi (1 year ago)
osm bro ... nice to meet u.
GamingTV (1 year ago)
wow, this video is bad, even in 2012
jall b (1 year ago)
I love the way you talk
Aaron Mayendesa (1 year ago)
thanks
Pa Yu (1 year ago)
Thank you so much!!! 😘😘😘
Mina Amir (1 year ago)
thanx ...
Banjoman (1 year ago)
did you record this through a walkie talkie?
let's code! (1 year ago)
+Ben Hanley recorded this using the mic on an old blackberry so close enough lol
Alexander Soltész (1 year ago)
very useful, thank you! Only thing I did differently is that I put the width: 100% to make it responsive. but anyways, both ways work awesome.
rakshit karande (2 years ago)
hey thank you very much you are very good programmer
Stephanie Quek (2 years ago)
What if I dun want any space between the two divs?
Latha Nelapati (1 year ago)
I guess you need to use even number. In the video he changed width 485 to 480 and it didn't have any space. Please correct me if I am wrong.
Graham Dryden (2 years ago)
Very clear, excellent teacher. Thanks! Saved my @ss.
Shoukat Ali (2 years ago)
Great
Darhan Alim (2 years ago)
after some manipulations with float, i finally got it thanks to your help as well. I had to make both left and right as float:right to have my buttons on the site stand side by side on the landing page. It just worked, dont ask why)
_ tony (2 years ago)
fuck off
Coding Techno (2 years ago)
thankssssssssssssssssssssss bhavaaaaa(bro).!!!!!!!!!!!!!!!!!!!!!!11
Abimael Y'israel (2 years ago)
Enjoyed the tutorial. Thanks.
Kakashi Sensei (2 years ago)
i really dont wish you a merry christmas.
Cloazer (2 years ago)
Thanks bro! Nice Vid
regan bajracharya (2 years ago)
problem solved for me..thank u man.
Qaisar khan (2 years ago)
Thanks bro it really helped
Rick Nance (2 years ago)
Thanks. cludging a bit myself to get a 3 column, but that was info I needed. Cheers!
Ginger Island (2 years ago)
guys if I write more than something it's overflowing to downside I mean it's exceeding elements why? after filling the left side it's not coming to right side but it's going downside. how to make that go to right side after completing left side
FULLBALL (2 years ago)
overflow: hidden; , also code with % and not px as much as you can.
Peter (3 years ago)
Awesome man thanks
A.J. Grimm (3 years ago)
Thanks so much, I was having some trouble with div tags and this cleared a lot up for me. Cheers.
Sosa Designer (3 years ago)
.right { width:240px; background-color:#00d; height:123px; float: right; }
Zach Johns (3 years ago)
Was just looking for a quick TUT and this worked well but the CC doesn't work well for people who don't have headphones.
let's code! (3 years ago)
sorry for the low quality audio, it was recorded on a shitty blackberry mic lol. Let me know if you have any questions I'll help out to the best of my abiility
Monira (3 years ago)
Good!
Kristina Laude (3 years ago)
Thank you! Super helpful!
XboxVillain1 (3 years ago)
This is great, but I want to make two more divs right below the side by side divs. Could I do this inside the wrap div or would I need to repeat the same setup again in a new wrap div?
let's code! (3 years ago)
+XboxVillain1 yup!
Ezeani Vitalis (3 years ago)
thanks but pls can u help me a bit..can u make a video on how to place a search bottom near categories.. I have tried but it would just join together thanks
let's code! (3 years ago)
+Ezeani Vitalis The videos later on use a better mic so the voice over get's much much better! Sorry you had to listen to this though.
Saimoom Black (3 years ago)
dude plz use a good microphone u r hurting my ears!
Mohammad Alabbassy (3 years ago)
Thanks this really helped <3
Henrik S. (3 years ago)
Awesome tutorial, thanks!
James Cao (3 years ago)
You show simple and comprehensive way to dive images side by side. Suggestions:1. use better audio so that your voice will be clearer.2. make css code to do more than two multiple images side by side
Rain (26 days ago)
1. everyone starts somewhere 2. not everyone needs to be extra
Alex Damis (1 month ago)
James Cao nah, he slapped it
celeste erskine (3 years ago)
Thank you! I still need to test it but the way you explained it made sense.
이가은 (3 years ago)
Thank you so much!
bilingualilliterate (3 years ago)
I've been looking for some explanation and in glad I got here. I wish there was an explanation on background images and div tags.
bilingualilliterate (3 years ago)
I've been looking for some explanation and in glad I got here. I wish there was an explanation on background images and div tags.
Rico Berti (3 years ago)
I want to put two scrolling text boxes side by side anyone care to help me out?
T - SURAG (3 years ago)
I tried this with more than 2 images and it didnt work
Carlos Sanchez (3 years ago)
can someone explain why every subsequent item i create after this just falls over anything i put between these two divs?
Sherlie Mae Matthews (4 years ago)
Excellent!!!  Thanks!
Shootingstar nz (4 years ago)
this was very good and informative, had some audio issues though! keep up the good work:)
Practice Repeat (4 years ago)
Just to let people know. Always try to make your css external, and avoid internal css as much as possible. For the background-color: #color ; is not necessary, you can just type background: #color;
Roshen Weliwatta (4 years ago)
Thanks
tyler wares (4 years ago)
super easy to follow. thanks for putting it up!
Abdullah Ahmed (4 years ago)
they dont come side by side :/ and i did exactly like you did just different sizes ! any idea what went wrong with my coding ?
Micheal Gilmore (1 year ago)
i dont know where to place this code so it will work, am so confused. pls view this code if its correct and also tell me what to do next. thanking you in advance <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd" <html xm1ns=http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-Type" content="text/html;charset"utf-8" /> <title>Untitle Document</title> <style type="text/css"> #wrap { width:485px } .left { width:240px; background=color:#00d; height:123px; float:left; } .right { width24opx; background=color:#00d; height:123px; float:right; } </style> </head> <body> <div id="wrap"> <div class="left"></div> <div class="right"></div> </div> </body> </html>
let's code! (4 years ago)
no problem :D
Abdullah Ahmed (4 years ago)
already solved it ,, thanks for the answer
let's code! (4 years ago)
i won't be able to tell what's wrong with the code if you don't show it to me....... lol
Khalil Khan (4 years ago)
IT DOES MAKE A DIFFERENCE..DUD..I HAVE NEVER LEARNED SO SIMPLE..KEEP IT UP...BEST ONE INDEED
Min Chin (4 years ago)
Very good and simple. Thanks!
Burst1ng Media (4 years ago)
thanks this was exactly what I was looking for.
Agnes Liang (4 years ago)
good.. and straight forward
Vincent Dual Blade (4 years ago)
its adobe dreamweaver?
let's code! (4 years ago)
yes it is
Sherry Bellamy (4 years ago)
perfect, to the point.
let's code! (4 years ago)
thanks a lot :D
Candace Johnson (4 years ago)
Extremely helpful! Thanks for posting.
Cthulhoo X (4 years ago)
good video.
Akid Rosli (4 years ago)
how do i change the sizes? let's say i want one div one the left side to be bigger and the one on the rght to be smaller. I also want it across the whole page.
Usman Soje (4 years ago)
very useful tutorial
MulaGraphics (4 years ago)
THANKS!!!!
Debbi R (5 years ago)
This is a great tutorial. However, I'm still confused. Is the CSS in the html file? I know this is asking a great deal. However, would it be possible to send you my html and css files to see if you can tell where I'm going wrong. I keep using tables because the div and css is taking me hours and hours. If you'd be willing to look at my code my email is [email protected] I'd be happy to send it to you. THANK YOU!
let's code! (4 years ago)
i am so sorry for not replying to you sooner. Your comment was sitting in the spam section for 2 months now... and i didn't take a look at it. as for this video the css is in the head section of the html file. However I recommend that you use an external style sheet for your project. 
sairam elango (5 years ago)
thanks a lot man...u are AWESOME :)
Steve Mayers (5 years ago)
This is great, thank you.
Sarah Weir (5 years ago)
There's an MIT research experiment that's looking to improve the way people learn from tutorial videos-- if you check out their site http://crowdy.csail.mit.edu/play/24/, you can watch this same video but with some added features. It's free and definitely worth checking out!
let's code! (5 years ago)
wow thanks for linking it here! :D 
Kevin McArtney (5 years ago)
Very quick and to the point: I cleared up some misunderstanding that I had. Most useful, thank you very much!
Ahsan Habib (5 years ago)
thx for your tutorial,b4 watch this videos i was confused now im clear.again thx to u.
du33ed75 (5 years ago)
how do you put a div inbetween? 3 in a row
Yogesh Rawal (5 years ago)
thanks ....
Twz6790 (5 years ago)
How do you do that with images? I have pictures I want to put side by side but I don't know how to do that and when I try to do the right tags it doesn't work right for me. At first I did this: <img src="Amerikanska Bilar/Anders-showroom (4).jpg"><p align="right"><img src="Amerikanska Bilar/Anders-showroom (5).jpg" />
let's code! (5 years ago)
it's practically the same thing. assign a class and then add the float properties. 
NuEnque (5 years ago)
Why not use .right{ display:inline-block; } and be done with it?
let's code! (5 years ago)
back in the day i didn't know that method. That's the only reason it's not covered in this video! thanks a lot for bringing that up! :D 
focusnewmexicodotcom (5 years ago)
Great demo, Thanks!
Fazil Zuhaib (5 years ago)
thanks for watching! :D 
Jeffman1993 (5 years ago)
Thanks a lot! Now I can stop banging my head against the wall! :)
Fazil Zuhaib (5 years ago)
LOL no problem! :D
Steven Hadley (5 years ago)
THANK YOU!!
ljanhong (5 years ago)
simple yet great tutorial! Thanks alot
let's code! (5 years ago)
your welcome! 

Would you like to comment?

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