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

Making Divs Side by Side using CSS

512 ratings | 144314 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)
Poke Gamer (17 days ago)
mickmon (29 days ago)
Habib Jalal (1 month ago)
but u didn't removed the spaces
Aaron Johnson (1 month ago)
That's extremely helpful!
OyiboMarket Worldwide (2 months ago)
Thank Bro.. You Helped me save time. been on my own for hours. keep it up. bless you
Michael Pasek (3 months ago)
thanks man!
FARAZ ANSARI (3 months ago)
thanks brother.. god bless you!
XAX LLC -Tigger Ranch (3 months ago)
I agree!! Simple and extremely helpful!
Siddhesh Rumade (4 months ago)
Thank you.
Marianito Barona (4 months ago)
thanks bro really saves my asses
Deirdre O'Loughlin (4 months ago)
Very good
Jatin sharma (5 months ago)
Thank you so much bro.. ❤️
JIKUU BEST MATCH (6 months ago)
How old is this version? 2005?
yagnesh suthar (6 months ago)
Wow... Nice tutorial You have explained very simply and easily...😊
Daniel Morgan (6 months ago)
Wow! Thanks that was really helpful!
Groovychanty JA (7 months ago)
This was simple and straightforward. Exactly what I was looking for.
Jay El Hernandez (8 months ago)
what software you are using in editing html?
Shrayus Masanam (12 days ago)
Adobe Dreamweaver c6
Qasim Abrar (9 months ago)
What software are you using?
Ptmp727 (9 months 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 (10 months ago)
Thank you :-)
Latha Nelapati (10 months 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 thakor (11 months ago)
osm bro ... nice to meet u.
GamingTV (11 months 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)
Pa Yu (1 year ago)
Thank you so much!!! 😘😘😘
Mina Amir (1 year ago)
thanx ...
Ben Hanley (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 (1 year ago)
hey thank you very much you are very good programmer
Stephanie Quek (1 year ago)
What if I dun want any space between the two divs?
Latha Nelapati (10 months 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 (1 year ago)
Very clear, excellent teacher. Thanks! Saved my @ss.
Shoukat Ali (1 year ago)
Darhan Alim (1 year 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 (1 year ago)
fuck off
Coding Techno (1 year ago)
thankssssssssssssssssssssss bhavaaaaa(bro).!!!!!!!!!!!!!!!!!!!!!!11
Abimael Y'israel (1 year ago)
Enjoyed the tutorial. Thanks.
Kakashi Sensei (1 year ago)
i really dont wish you a merry christmas.
9ameshark (1 year 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 (2 years ago)
Awesome man thanks
A.J. Grimm (2 years ago)
Thanks so much, I was having some trouble with div tags and this cleared a lot up for me. Cheers.
Sosa Designer (2 years ago)
.right { width:240px; background-color:#00d; height:123px; float: right; }
Zach Johns (2 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! (2 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 (2 years ago)
Kristina Laude (2 years ago)
Thank you! Super helpful!
XboxVillain1 (2 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! (2 years ago)
+XboxVillain1 yup!
Ezeani Vitalis (2 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! (2 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 (2 years ago)
dude plz use a good microphone u r hurting my ears!
Mohammad Alabbassy (2 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
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.
Skellington Wayne (3 years ago)
I want to put two scrolling text boxes side by side anyone care to help me out?
M.O.A IX (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 (3 years ago)
Excellent!!!  Thanks!
Shootingstar nz (3 years ago)
this was very good and informative, had some audio issues though! keep up the good work:)
Practice Repeat (3 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 (3 years ago)
tyler wares (3 years ago)
super easy to follow. thanks for putting it up!
Abdullah Ahmed (3 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 (8 months 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! (3 years ago)
no problem :D
Abdullah Ahmed (3 years ago)
already solved it ,, thanks for the answer
let's code! (3 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 (3 years ago)
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)
Debbi R (4 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 (4 years ago)
thanks a lot man...u are AWESOME :)
Steve Mayers (4 years ago)
This is great, thank you.
Sarah Weir (4 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! (4 years ago)
wow thanks for linking it here! :D 
Kevin McArtney (4 years ago)
Very quick and to the point: I cleared up some misunderstanding that I had. Most useful, thank you very much!
Ahsan Habib (4 years ago)
thx for your tutorial,b4 watch this videos i was confused now im clear.again thx to u.
du33ed75 (4 years ago)
how do you put a div inbetween? 3 in a row
Yogesh Rawal (4 years ago)
thanks ....
Twz6790 (4 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! (4 years ago)
it's practically the same thing. assign a class and then add the float properties. 
NuEnque (4 years ago)
Why not use .right{ display:inline-block; } and be done with it?
let's code! (4 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 (4 years ago)
Great demo, Thanks!
Fazil Zuhaib (4 years ago)
thanks for watching! :D 
Jeffman1993 (4 years ago)
Thanks a lot! Now I can stop banging my head against the wall! :)
Fazil Zuhaib (4 years ago)
LOL no problem! :D
Steven Hadley (5 years ago)
ljanhong (5 years ago)
simple yet great tutorial! Thanks alot
let's code! (5 years ago)
your welcome! 
Sam Euston (5 years ago)
Thank you, your tutorial was very helpful !
Sasidhar Kareti (5 years ago)
Thank you! that made my day!
very well done
Geoffrey Graham (5 years ago)
Excellent tutorial. I watched 6 tutorials so far, each was long and booooooring, but this tutorial was great and is what helped me the most. I'm sure I'll be referring back and using this again. You are a good teacher!
Soar High (5 years ago)
good job mate!
Frank Branker SR (5 years ago)
love it
MMYB (5 years ago)
Thanks a lot man, basic, direct, solution along with a simple concept. Helped me take my web design to the next level, thanks again.

Would you like to comment?

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