SECTION: 1
Overview
3:20:28
6:21
5:25
5:50
3:13
12:46
🚨 Heads up! This course is no longer supported. We recommend checking out our Webflow Essentials course.
How to float a div tag
SECTION: 1
Overview
3:20:28
6:21
5:25
5:50
3:13
12:46
Questions
Student Gallery
Be the first to share something.
Course info
Overview
Dreamweaver (and web design in general) is such a hard program to teach yourself. We know, because as Dreamweaver trainers we have all taught ourselves. We wish we had a resource like this when we were learning.
Hand coding a website from scratch is now a thing of the past. Web designers use tools like Dreamweaver to a lot of the heavy lifting. We imagine this is your first website build and we're glad we're here to help make this process a little less troublesome.
Who should use this?
Anyone that is brand new to Dreamweaver and anyone brand new to web design in general. If you're reasonably experienced in web design you might find this course a little slow going.
What do you need?
- You'll need a laptop (Mac or PC)
- Dreamweaver CC installed. Dreamweaver can be downloaded from theAdobe website here.
Can I use this tutorial with Adobe Dreamweaver CS4, CS5 or CS6?
No. Unfortunately there were some fundamental changes in the Dreamweaver CC update that makes CC and previous versions very different.
Remember you can download Dreamweaver CC free for 30 days. Don't worry - after your free trial has expired your files will still be updatable using any other web design program.
If you like the tutorials we'd love you to like, share and tweet it. We'd be very grateful.
Daniel Scott
Founder of Bring Your Own Laptop & Chief Instructor
I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.
Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.
Downloads & Exercise files
Transcript
Hi, and welcome to this Dreamweaver tutorial. My name is Daniel Walter Scott, and I'm a trainer here at Bring Your Own Laptop. What we're gonna be doing in this tutorial is we're gonna be looking at editing an existing div, and we're gonna look at creating a div that goes side by side. It's called, uh, floating divs. Now, first thing I'm gonna do is I need to adjust the size of this green box because I made it too big in my last tutorial. So we're gonna move it from 900 pixels to 700.
To do that, make sure you're on main css. Scroll through until you find the div tag called text. And then in here you can see I can change it from 700 to uh, from 900 to 700. All right, it's made a little smaller to fit my image diviv tag. Great. So let's put the image div tag that's gonna go on the right hand side here.
It's gonna insert Diviv tag. Where is this one gonna go? This one's gonna go after my text box. Okay, this, we're gonna have an ID of image. Let's click. Okay, kind of works.
It's definitely after the text box I can check and code view, um, and go to source code. You'll see there's my container. It's wrapping everything out. Then there's my header. It opens and closes. Then there's my nav, which opens and closes, text opens and closes.
And there's my last one, the image. So it's right after it, but it's not filling the gap over here. So we need to look at something called float to make that happen. Let's first of all style our image div tag, just like we did with the rest of them. Let's go to main, let's click a selector. And this one's called image.
Okay, image enter. So we have a width of pixels. What's left is 3 24. Okay, so it's the right width, so it should fit in there, but it's not, that's okay. Let's give it a height. Let's match the height of the last one, which I think was about 400 pixels.
So it's the right height. Let's pick a background color and let's pick orange. All right, let's make it a more orange. Orange. Great. So it's, it's there but it's not underneath.
So we need to look at something called float now. So we need to do two things. We need to float this guy called text ID to the left. And we need to float the orange to the right and that will make them sit side by side. So we're gonna play around with text first. So make sure you're in CSS, find the text and you're gonna scroll down until you find float.
So it's a little bit down here. There it is, there. Float. I'm gonna float him to the left. And something strange happens if I click float, you'll notice the orange box kind of disappeared. It slipped underneath the green box and The text is squid out on the side here.
So don't worry about that. Um, it's a two step process. You need to float the text box to the left and the image box to the right. So once we've done that, it all should come back to normal. So under main CSS, I wanna find the image box and I'm gonna float this one to the right. And there he is.
He pops up next to this guy. Alright, so float is used for putting div tags side by side. I could have 10 div tags and keep floating them. Left, left, left, left, left, left, left. And they're all stack up next to each other. Okay?
So it doesn't matter how many you actually have, you can use, um, the float to get them to stack up next to each other. In the next tutorial, we'll look at clearing the float, which means putting something underneath these two. So, alright, I'll see you in the next tutorial.
To do that, make sure you're on main css. Scroll through until you find the div tag called text. And then in here you can see I can change it from 700 to uh, from 900 to 700. All right, it's made a little smaller to fit my image diviv tag. Great. So let's put the image div tag that's gonna go on the right hand side here.
It's gonna insert Diviv tag. Where is this one gonna go? This one's gonna go after my text box. Okay, this, we're gonna have an ID of image. Let's click. Okay, kind of works.
It's definitely after the text box I can check and code view, um, and go to source code. You'll see there's my container. It's wrapping everything out. Then there's my header. It opens and closes. Then there's my nav, which opens and closes, text opens and closes.
And there's my last one, the image. So it's right after it, but it's not filling the gap over here. So we need to look at something called float to make that happen. Let's first of all style our image div tag, just like we did with the rest of them. Let's go to main, let's click a selector. And this one's called image.
Okay, image enter. So we have a width of pixels. What's left is 3 24. Okay, so it's the right width, so it should fit in there, but it's not, that's okay. Let's give it a height. Let's match the height of the last one, which I think was about 400 pixels.
So it's the right height. Let's pick a background color and let's pick orange. All right, let's make it a more orange. Orange. Great. So it's, it's there but it's not underneath.
So we need to look at something called float now. So we need to do two things. We need to float this guy called text ID to the left. And we need to float the orange to the right and that will make them sit side by side. So we're gonna play around with text first. So make sure you're in CSS, find the text and you're gonna scroll down until you find float.
So it's a little bit down here. There it is, there. Float. I'm gonna float him to the left. And something strange happens if I click float, you'll notice the orange box kind of disappeared. It slipped underneath the green box and The text is squid out on the side here.
So don't worry about that. Um, it's a two step process. You need to float the text box to the left and the image box to the right. So once we've done that, it all should come back to normal. So under main CSS, I wanna find the image box and I'm gonna float this one to the right. And there he is.
He pops up next to this guy. Alright, so float is used for putting div tags side by side. I could have 10 div tags and keep floating them. Left, left, left, left, left, left, left. And they're all stack up next to each other. Okay?
So it doesn't matter how many you actually have, you can use, um, the float to get them to stack up next to each other. In the next tutorial, we'll look at clearing the float, which means putting something underneath these two. So, alright, I'll see you in the next tutorial.
