Centering your website div

Hi, and welcome to this Dreamweaver tutorial. My name is Daniel Walter Scott. What we're gonna start doing now is creating a diviv  tag, uh, website. So it's gonna add some structure  and some boxes so that we can move all of our text  and images into some sort of resemblance of a website now. So the first thing we're gonna look at is creating what's  called a container div or a ative. So what that means is we're gonna create a box  that all the website's gonna sit inside to start with.

Then we're gonna look at centering it. So to get started,  what we're gonna do is I'm gonna put a few returns in. It's really hard to get your cursor in front of that. Put a few returns in above this stuff  and we're gonna put the structure above it  and then we'll drag everything into it. So to get started, we are going to insert a diviv. Okay?

So go up the top, go to insert and go to diff. Now we're gonna use IDs to style this container. So we're gonna have an ID of container  and we're gonna click okay. So let's put a container right in the top of my page. Um, and so you can see it in my source code here. I'm gonna put a few returns  in there to make that look nicer.

So you can see I've got a container. It opens and then it closes there  and inside of it, the only thing inside of it is this bit  of text here, just placeholder text. And what we'll do is the whole website will end up  inside this container div. Now we need to style it. So I've gone back to design view  and I'm gonna style this div using Cs s to do it. Okay, I'm going to click and main do css.

Okay, so I'm gonna style it in here  and I'm going to create a selector that little plus. And this one's gonna be hash container. And you can see it needs to be spelled exactly the  same way you named it earlier. Okay, click enter twice. Now I'm gonna give it a width. Okay, now in, in terms of width, it's up  to you really to style.

Decide how wide your website is. It's really common to have a pixel width of one, uh,  sorry, of 10 24. So 1024. You can go a little bigger. You don't need to go really a lot of smaller  and for a desktop website. Um, but Google Round just  to see this tutorial might be getting a little old.

So just check what the kind of  standardized widths is these these days. So the widths done. Let's add a background color for it just so  that we can see it up in here. So I'm gonna pick a background color of gray. And you can see in my design view I've got a Diviv tag  that has a width of 1 24 pixels and kind of stops there. That's a kind of a default website size.

Now we don't add a height to containers  because we let the content  inside the container stretch out the height  and that will do that by itself. So don't need a height on it. What we do want to do is center it. 'cause if I preview this in a browser,  so I got a file preview in a  Browser, actually, let's go to file  and go to Sable first, then go to file preview in a browser. We're gonna do Google Chrome. You can see it's stuck on the left hand side there  and it's really common to have  a centered website these days.

So back into Dreamweaver. Um, I'm going to find in main css, I'm gonna scroll down  until I find container. Click on that. So there's kind of two parts to this. We need to make the margins auto and the site relative. What that means is, if I scroll down, this is my margin.

Now, okay, if I make the margins auto by clicking pixel,  click auto, both the left  and the right, that'll help this website be centered. The last thing I need to do is scroll down just a little  further and the position should be  relative, right? So if I zoom out, you'll see it's  centered within Dreamweaver. Let's test in the browser. Let's go to file. Proven a browser.

It's gonna ask me to save. I'll say, yes, please save. And you'll see my site. Now container is centered  and if I resize Google Chrome,  you see it comes along for the right. Great. Let's jump back into Dreamweaver.

Okay, that'll be it for this tutorial. What we'll do next is we'll look at adding the, the boxes  for our headings and navigation and our texts and images  and those types of things in the next tutorial. Alright, see you then.