Floating Div Tags in Dreamweaver

In this video I'm gonna show you how to float div tags and place elements side by side...

Download everything we made in this video (ZIP)

Hey everybody, Greg Davis here. In this video I'm gonna show you how to float div tags and place elements side by side.

By default, elements follow each other on the web page in the same exact order, as in the code itself. But what if I wanna place elements next to each other? Well, let me show you!

I'm gonna create 2 div tags HERE, and I show you how to place them side by side.

I GO to code view.

And I TYPE in a div start tag: <div style="

I'm using an inline style now, so I can style my div tag here in the code. And I'm gonna float my div tag. That's how you can place elements side by side by floating them.

So I TYPE in: float:left; CLOSE it off, HIT my spacebar.

If you're doing this in your DW CSS dialog box, you will find float inside of the box category. Ok, your element must have a width value applied to it if you wanna float it.

So I TYPE in width:200px; CLOSE it off.

I also TYPE in height:200px; CLOSE it off.

And I TYPE in: margin: (top)20px (right)10px (bottom)20px (left)0; CLOSE it off.

It goes in a clockwise motion starting from the top.

Ok, I CLOSE my div start tag.

I TYPE in some text here, so it has some content inside of it, like: <p>Float 1</p>

I NEED a div end tag.

I GO to design view.

And with floats every other element underneath it (unless I clear the float) is gonna try to move to the side of that particular element. If you wanna wrap around an image with text for example, this is what you need to do. But now, I don't want my text to move to the side of my div tag, so I'm gonna clear the float.

I GO back to the Code

And under my floating element, I TYPE in: <br clear="all" />

I GO back to Design View.

And because I have cleared the float, my text no longer tries to move to the side of my div tag.

Ok, I GO back to the Code.

I COPY my div tag.

And PASTE it in again right under it.

Ok, I PASTE it in again.

I need 3 of them just so that you really understand how they work.

This comes second in the code, so I TYPE in "Float 2"

This comes third in the code, so I TYPE in "Float 3" just so that you see where they are on the page.

I clear the float under my last floating element, I GO to design view.

And HERE they are. My div tags are lining up next to each other.

I float them left, so the first one in the code is on the very left, and the following floated elements are lining up next to it on the right. If you float them right, the first element in the code will be on the right, and the following floated elements will line up next to it on the left.

Floating is the basis for creating complex web pages, so you really need to understand it. But as you could see, it's not difficult at all.

And of course, you can style these elements any way you want. You can give them a border, background color, or background image, whatever you want. I'm not gonna do it now, you already know how to do it from my previous videos.

If you go through all of my videos, you'll become a professional web designer pretty fast. So go to my website EasyWebDesignSystem.com, and check out all of my videos.

Ok, I end this video now. I hope you enjoyed it, thanks a lot for watching, and see you in the next video. Bye!

Next video:

How To Create a Table in Dreamweaver>>>

All videos in recommended learning order:

How to design a website using Adobe Fireworks>>>

Building a Website Start To Finish With Dreamweaver>>>

How To Embed a YouTube Video On Your Website>>>

Floating Div Tags in Dreamweaver>>>

How To Create a Table in Dreamweaver>>>

Building a Web From in Dreamweaver>>>

Dreamweaver CSS Website Layouts>>>

Creating a CSS Drop Down Menu in Dreamweaver>>>