This is Sasha and welcome to another CSS training video. Today, what I’d like to do is take a quick look at using the div elements in creating a basic or quick little layout so that way you see the bigger picture within building a structure.
This isn’t going to be full layout tutorial, but I’ll show you some quick insights so that way you see the bigger picture in the future as you continue to learn CSS and continue to evolve to learn to manipulate and modify your business website. Let’s take a quick look.
Creating a website layout
Here what I have is just a div tag and what I’m going to do with this is I’m going to put the CSS directly in here so that way – straight in the code of the HTML so that way I can see where the elements are. But basically, what I’m going to do is create a structure so that way you can see how a layout or website is done.
What you may want to do, the main website, okay, is just kind of watch and see how I create these div tags and div elements, okay? Basically what you do with div element is their elements within other factors to create a website structure. Here, what I’ve done is built let’s say the main page right here for my initial portion, and this is 1 pixel solid red, okay? That’s my main website, okay?
I have a main div in there. The next thing what you may want to do is create another div element, and I’ll make this an ID so that you practice with the ID element. This could be the navigation section, okay? Here goes my navigation. You can see how I’m nesting elements in here. I’ll save this. We’ll go ahead and type the Navi section, and I’ll go ahead and do border 1-pixel solid green so that way things are different, let’s make it 2 pixels and so there’s my navigation.
You can see how that was slowly starting to come alive. I probably don’t need that main website right at the top, okay? There goes my navigation and let’s say I may want to put like a logo right here in front and center also. I’ll go ahead, I’ll do another div element right here.
-------------------- HTML CODE ----------------------- Document
-------------------- CSS CODE -----------------------
body {backgroung: #eff9fc;}
div {background:#fff;}
#logo {border:1px solid orange;}
#navi {border: 1px solid green;}
This might be my logo. I’ll do border 1 pixel solid let’s say orange, okay, and this is how I do the layouts so that you’re seeing and learning how things are being built. You can see I have one inside of another inside of another. What you may want to do then is, with these block elements, I could do width let’s say 300 pixels so that way I could see, okay, maybe even let’s say 200 pixels, okay?
Let me zoom out a little bit maybe you can see that a little bit better, okay? You can see that’s 200 pixels and don’t stress too much about the flow but I’m going to float this left, and this will float right, and I’ll also do a width on this one, let’s say width of let’s say 600 pixels, actually we’ll even float this left.
That way it’s left and left. Let me take a quick look, okay? Let see. Make this 300, make this 150. I’m zoomed in into the browser a little bit so that way since I’m zoomed in into the browser, it kind of – it spans it to the next line. I have to use a little bit smaller values to get my point across, but here you can see how that layout is building.
-------------------- HTML CODE ----------------------- Document
-------------------- CSS CODE -----------------------
body {backgroung: #eff9fc;}
div {background:#fff;}
#logo {border:1px solid orange; width:100px; float:left;}
#navi {border: 1px solid green; width:200px; float: left;}
Let’s see overflow display, or we’ll do auto just so that other element is shown. You can see now, okay, I have my main div right there. Then I have my other divs let’s get those indented that way, so we have more room. Okay, so you could there’s the logo. There’s the navigation and now let’s see and create like a content area.
We’ll do content area and I here, here goes my logo, here goes my content or an article so this one will go ahead since all other elements are floated, this one will go ahead and clear both for the time being, don’t stress too much about the CSS code but I’m just showing you how things are working and again we’ll do border 1 pixel solid blue.
You can see, there we go, there’s my content, and I can go ahead and put in many materials right here or dummy content. There’s my content that goes there, and then I could also create another div let’s just copy this logo div, and we’ll just say footer right here, footer, and we’ll just clear on both just in case, border 1 pixel solid, I’ll just do like a gray and here we go and you can see here goes my footer.
-------------------- HTML CODE ----------------------- Document
Here goes my content.Here goes my content.Here goes my content.
Here goes my content.Here goes my content.Here goes my content.
-------------------- CSS CODE -----------------------
body {backgroung: #eff9fc;}
div {background:#fff;}
#logo {border:1px solid orange; width:100px; float:left;}
#navi {border: 1px solid green; width:200px; float: left;}
#content {clear:both; border: 1px solid blue;}
#footer {clear:both; border:1px solid #3a3a3a;}
You can see how I’m starting to create this and my content, let’s say within my content I want like a little sidebar or a navigation bar, right? What you would do then is within that content, okay, so you’re basically now creating, okay, well, I may want to do within the content, I’ll say I’ll create another div and I’ll say, “Okay, this is my – I could do an ID, or I could take a class.
This will be my article, and Then within that, I’ll do the let’s say sidebar, okay?” Here, here goes my dummy content, okay? I’ll go ahead and fill that up sidebar, here is my navi, okay, on the right. My navi right side.
You can see there and let’s plug these in. I have the content there, and here I can type in the article, okay, and the article will do float left and let’s say I want it to have a width of let’s say 500 pixels border 2 pixels solid black or let’s say dashed black.
You can see right there, okay, let’s do tighter width, okay? There you could see how this content is being created right there and then my right navi right there would go there.
-------------------- HTML CODE ----------------------- Document
Here goes my content.Here goes my content.Here goes my content.
Here goes my content.Here goes my content.Here goes my content.
-------------------- CSS CODE -----------------------
body {backgroung: #eff9fc;}
div {background:#fff;}
#logo {border:1px solid orange; width:100px; float:left;}
#navi {border: 1px solid green; width:200px; float: left;}
#content {clear:both; border: 1px solid blue;}
#article {float:left; width:200px; border:2px dashed black;}
#footer {clear:both; border:1px solid #3a3a3a;}
You could see how I’m just structuring things. Let me zoom out to 100% so that you could see how it’s looking obviously since the width I’ve done things differently. You could see a split screen, it seems a little funky, but you can see I have a layout where I have a logo, I have navigation, I have content there on the left, I have a little shipping there on the right and my footer on the bottom.
It’s starting to build the layout, and ultimately this is how you work with divs, with tags, with elements, and within your page and to show you an example kind of where I’m going with this example. I’ll pull up my website, so you get an idea of what’s happening.
Looking at my website
If you go to let’s say my blog post, so you could see there’s a logo, there’s navigation, actually I have other navigation that would be a div, here’s our left side and there’s our right side over here on the right panel.
You could see there are two divs there and then towards the bottom here I have my footer, and these of course within it could also be – this could be a div, this could be another div, this is a div, right? These all could be like little divs. This could be a div. There could be another div within here and here because one is floated left, one is floated right, also just as on a big picture scale.
Let’s see if I can do it here. On a big picture scale, this itself is also a div. You could see how this works nicely when it comes to creating and structuring a layout. There’s a lot of divs that ultimately creates this page.
If you look at the top over here, again, just kind of what we did, you could say, “Okay. Well, this is our main page, right?” That’s our main page then what we’ve done is here’s another div and here’s another div for our navigation but we also have kind of the main element right there for that navigation.
Then we also have our main content right here, so this is our content, but then we have two divs right here inside of it right there. Now, I here have a few extra divs so I could have divs inside of that div and you can see how that comes about and creates the website.
That’s how you get a good idea of working with divs, working with content, show you how it really plays together and works together in that way you get some practice ultimately. This is not a training tutorial on creating a layout, but it gives you some ideas of how they piece together to create a layout in that future ultimately.
