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.