HomeХобби и стильRelated VideosMore From: ColaBuzz

How to Float 3 DIV Boxes Side by Side in a Row. Stack & Align DIV Boxes Side by Side w/ HTML & CSS

402 ratings | 111092 views
In this tutorial I will show you how to write code for three small div boxes inside one large div box. Div side by side, float div boxes, floating div boxes, aligning div boxes, float div box, boxes side by side, stacking div, aligning div, floating div, html div align, html div float, html div stack, css div float, Div side by side, float div boxes, floating div boxes, aligning div boxes, float div box, boxes side by side, stacking div, aligning div, floating div, html div align, html div float, html div stack, css div float, Div side by side, float div boxes, floating div boxes, aligning div boxes, float div box, boxes side by side, stacking div, aligning div, floating div, html div align, html div float, html div stack, css div float, Div side by side, float div boxes, floating div boxes, aligning div boxes, float div box, boxes side by side, stacking div, aligning div, floating div, html div align, html div float, html div stack, css div float Please SUBSCRIBE to my channel to show some support. Thanks! If you have any questions, feel free to let me know. If you have any problems, or questions, send me a messege, and I would be glad to help. I hope you liked this tutorial, please like my videos, and subscribe to my channel.
Html code for embedding videos on your blog
Text Comments (80)
J1mb0 (3 months ago)
Your tutorial only really helps if you want to make something look good on a specific resolution. When you're making a page you want it to look nice in a smaller window too, so I find this a bit lame
Karl Beltran (4 months ago)
Stop explaining the simplest things you'll do and Stop saying "Follow me as I do this", be direct man, you don't have to add all of these in c'mon.
Anushka Paswan (6 months ago)
Awsome sir
Rubel Hasan (7 months ago)
Thank You Sir You are The Best My 5Hour Lose But You help Me 10minute
Jay Mcihael (7 months ago)
Hi Ai
V F (8 months ago)
They are not centered at the page
Jean Lunde (8 months ago)
Your tutorial was extremely helpful! I'm doing my first project in Dreamweaver and wanted to do exactly what you explained. Thank you.
Sumit Negi (8 months ago)
Tatti Kha le
Roy Ritchey (8 months ago)
Thanks for the video, Mr. Robot. :)
prakher jindal (9 months ago)
Why float left was used for first 2 boxes and float right for 3rd box?
bhavya rayala (10 months ago)
This vedio is better bt the did not coming the output😡
Ankur Dutta (10 months ago)
Haha google TTS XD
Billy Lowe (11 months ago)
Great tutorial. I need help understanding the NAMES of boxes or categories or classes. What ar etheh calld aned in what order??
Yashi Singh Rajput (1 year ago)
How should I use this in external css
Yashi Singh Rajput (1 year ago)
You are using internal css
ade adeniyi (1 year ago)
Highly educational video....Love it.
Chris Elmer (1 year ago)
See kids, this is what happens when computers are under influence of drugs. They talk all slow and sloppy, and try to teach users html instead of playing steam games.
speak up (1 year ago)
Float: center;
Sel A (1 year ago)
yeah but those div blocks are no good for a proper responsive site... if you squeeze the browser, the right block will position itself on top/under the middle one!
Savannah Day (1 year ago)
followed your code precicely and all my div boxes are on the left and underneath each other, I have got the float left and right exactly where you have them
Monavie Voight (1 year ago)
How could I make these boxes to work within a blog post on wordpress.com using one of their premade setups? Thank you!
Camilo Jusid (1 year ago)
thanks to stephen hakwinns my divs are more styled
Marinus Sommeling (1 year ago)
7 hours...... 7 hours I was trying this on my own....... You made me succeed in 10 minutes. You don't know how thankfull I am.
Solomon Jenkins (7 months ago)
start fed?
Jay Mcihael (7 months ago)
@Solomon Jenkins same here lol, you start fed too, Solomon?
Solomon Jenkins (8 months ago)
i know this feel lol
Ridom Paul (1 year ago)
Want some more wine?
BRIAN AGINA (1 year ago)
creepiest tutorial sound in a nice tutorial.
Mike Stone (1 year ago)
Nice easy video tutorial to follow. Have no code experience but managed to follow and do this easily!
Shakeel Ur Rehman (2 years ago)
how can i adjust green div margin auto...when i change my screen size green div remain same margin from left and right div...specially when i change my sceen size small
scott_909 (2 years ago)
are you kidding me with that voice?
MT (2 years ago)
I thought you needed a separate file for html and one for css and link the css file from the html file.
cd5ssmffan (1 year ago)
you dont need to but its helpful
Shivaji Bhosle (2 years ago)
How can I align whole largebox in center this thing worked but whole div largebox going on left side while page loads please help
dhananjai pande (2 years ago)
how do you know , when to use margin or padding ?? whats the difference? and how what hanges do I need to know if I want to make this code class based ? Please help , thank you .
Rounak Paul (2 years ago)
thanks sir.the video was quite useful regardless of the narration . overall it helped a lot :)
krishna mvns (2 years ago)
narrator suits well horror narration
Nenad Scepanovic (2 years ago)
Voice sounds very funny and retarded, but this video helps me a lot! :)
Akkupack (2 years ago)
ayy lmao the voice
Sandip Gore (2 years ago)
i want to add each one div to envelope/ or icon like my telephone number in first want to add telephone icon behind no and email id behind email icon how can do it help me please
Mrc hfrn (2 years ago)
I can't do this tutorial. The voice is nightmarish.
Jay Mcihael (7 months ago)
I kinda like it...
John Padilla (1 year ago)
hahahahaha
MINUX (2 years ago)
How to add more content under these boxes? not working for me cuz the content under it i floating behind, help!
TheKolacic (2 years ago)
Ok, i have question. What is u shrink your browser and third div collapse down? How do you make your div shrinking wiht window and not collapse?
Iacovenco Vlad (2 years ago)
Holy shit, I`ll have nightmare with divs after listening to this tutorial. The sound couldn`t be more creepy, that`s for sure!
glytzhkof (7 months ago)
My logic is undeniable. Undeniable. Undeniable.
Zareh Dermenjian (11 months ago)
Brah
Ridom Paul (1 year ago)
😂Drunken voice assistant
Juan Luis Zamora (3 years ago)
shit
Monira (3 years ago)
Thanks!!
akash tapsee (3 years ago)
put speed in 1.5*
Andrew Jackson (2 years ago)
I just had to laugh so hard omg
Anindo Mahmud (3 years ago)
The video is highly educational but the narration is horrible. The narrator would be better off narrating creepypasta stories.
Ajit More (2 years ago)
lol, you've killed it..
moms onDmove (3 years ago)
this is such a great tutorial specially the divs. please dont use the robotic voice ..yeah just talk to us.
Azizjan Ayupov (3 years ago)
Thank you, man!
David Keane (3 years ago)
Pure magic!!! Thank you!!
Shapka (3 years ago)
fucking robot voice, you lazy fuck.
11swallowedinthesea (2 years ago)
Perhaps the uploader is mute?
Shapka (3 years ago)
LOL. Somebody woke up with a big pickle in his butt, don't be so rude and mean. ALL I SAID WAS THE TRUTH. Bye idiot.
moms onDmove (3 years ago)
+Shapka shut the fuck up if you dont have anything non-idiotic to say. make your own tutorial and goo it yourself. now get outta here!
Norm Cos (3 years ago)
Thank you Devon Timmerman I am a newbie to Dreamweaver Your video is great! I give your video a ten, you even explain why things are put into the code! / I have been trying to make a link bar using Divs (13 boxes across, 3 down). I could not figure-out how to put multiple Divs side by side. One person did two Divs, but made the large box force them together. You nailed it with the two first two Divs, both float left, with padding and margins to align them! Thank you so much! / I found the voice to be easy to understand! The voice does seem weird at first, but as I followed the instructions, I greatly appreciated its clarity! As someone else mentioned, you explain things calmly without rushing!!! I have a great problem understanding peoples voices giving instructions in videos, I can not understand the voice of many persons. I am from the USA, I especially can't understand the persons with accents from England! Great Lesson, Thanks again!!! - Norman -
cobi * (3 years ago)
7.5/`101 not enugh dib
Nik Duncan (3 years ago)
Thank you for such a great video, you managed to make it so simple to understand. I've wasted time and money on tutorials through sites like Lynda and Udemy which don't make it as accessible as you have!
James Cao (3 years ago)
Thanks for your video. You explain every step clearly without rushing so the views can follow.My further question is that you do this with fixed number pixels for each box, padding and margin. As you resize the IE/Chrome/F..., the boxes will not hold the relative position. If you can show the way to resolve the problem, I am appreciated.
JohnnyJazzFreak (3 years ago)
Thanks. Just what I needed.
Raphael Lambarte (3 years ago)
Thanks :D
Gino Romeo (3 years ago)
Great instruction,  How would the "largebox" be centered?
Nik Duncan (3 years ago)
+Nik Duncan Sometimes that can not always work as expected (perhaps different browsers render things differently) so instead you could replace the margin: 0 auto; with :-  margin-left:auto; margin-right:auto; and it'll work the same for centering largebox...
Nik Duncan (3 years ago)
+Gino Romeo Add the following to largebox's style rules: margin:0 auto; -the '0' means the margin to be added above and below the div and the 'auto' means Left and Right edges. -As it is auto this means the browser looks at the width of the document (ie the page) and then works out that the width of the document minus the div's width leaves N pixels left. This amount (N) is then shared between the left and right to center the div. -Assume the document is 1000px and we know the largebox div is 800px so this means 1000-800 leaves 200px which will cause the browser to assign 100px margin to both the left and the right.
OghamTheBold (3 years ago)
Video Settings | Speed x2 - helps
dj miXin (4 years ago)
Very nice and clean the way it's supposed to be structured my manager used to use tables all the time it was super tedious complex and monotonous
Mohd Ansar Mughal (4 years ago)
well done very simple
Smotech (4 years ago)
Hey Devon thanks for the tutorial. I am still learning Dreamweaver (self-taught) and have been looking for this type of video for quite some time. Everyone wants to show how to float two div boxes but yours was the first to show three. Other than the robotic voice, this video was great. Keep it up. I'm sure I'll be needing the help. ;o)
Andy Nic (4 years ago)
It would be handy if there were a link to the html so that we could copy and paste it into a test file.
Andy Nic (4 years ago)
Nicely presented -- exceptionally clear both in terms of presentation and content.
Alex Cortez (4 years ago)
Thanks dude this helped a lot
spectre5517 (4 years ago)
how would i get the boxes to stack like this  http://www.sethgodin.com/sg/books.asp
TeddyBear312 (4 years ago)
@spectre5517 if you are still looking for a answer, you make 1 large container and in there you make for every picture or color you want to show a seperate container inside the large container. here is a link for a test: https://jsfiddle.net/v7oakjyr/

Would you like to comment?

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