Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
CSS enables you to control the look and layout of a web page much more precisely than you could with HTML alone, but it can be time-consuming to learn. In this workshop, expert developer Candyce Mairs makes styling a quick and easy process, walking you through the process of adding content to a web page and using CSS to position that content. Candyce explains CSS positioning concepts like the CSS box model, floats, and clears and demonstrates how HTML and CSS work together to create the look of your web page. By speaking the same language as the browser, you can learn to work with the browser to place content accurately and easily.
I now want to focus on the footer portion of my webpage, as I have a situation there that needs to be addressed, and at the same time, I want to show you how to work with the margin property in CSS. Margin, order, and padding are all apart of the CSS box model. Because of that, you have to be careful when you go to apply those properties, because it can affect your width.
So I want to have this opportunity to show you how we can work that property, and deal with this situation right here, with regards to my footer. So the footer at this point does not extend as wide as my content area. So this is where my footer begins. And my footer has a background image applied to it, which is creating this drop shadow background. Now, I could certainly type text in on top of this image.
It's not an actual image sitting on the page, like these images are. So there is no image tag applied. If I go down to the div tag for the footer itself. There's absolutely no content inside this div. I have background image applying within the CSS portion, so if we go up to the footer, this is where my image is coming from. I have also told CSS don't repeat this image, because by default a web page will want to repeat an image if it's not quite the same size as the area you're placing it.
I have a clear left, and what that is doing, is making sure my footer stays at the bottom of the page, underneath these three columns. These three columns, have floats applied to them, so I need a clear in the footer area, to make sure this stays below those floats. I also have a height, and this is coming from the height of my image. But notice, I don't have a width margin or padding applied to this footer area.
And part of the reason for this issue is my footer isn't quite wide enough. Or, put this way, it's not starting to the left enough. And I can use something called a negative value in my margin area to correct that. So first of all, let me add a width to this footer, and I'll add a width. The width I'm going to add is 836 pixels. So that is all set.
Now, let's take a look at it. And I'm looking at this right within CoffeeCup itself. I can get to this view by going to View > Split Screen View. And pulling this up. I can adjust this as needed. So it's just a real quick easy way to view my page. Without having to go out to the browser all the time. Now look what happened when I put that width in. My footer image is still starting too far to the left, but at least now I have the rest of the image extending to the right.
So how do I address this footer? It's almost like it's shifted over to the right compared to my content area. And what I can do to deal with this is I can apply a negative value to the margin. So what I'm going to say is margin left, and my margin left value is going to be a negative number. And I'll start by applying ten pixels, cuz that looks approximately like ten pixels to me. Now notice what happened, that works pretty well. What it has done is pulled my left margin exactly where I wanted it to be. Now my right margin still has a little bit of an issue, but the reason for that is because my content area doesn't quite have enough padding on this side. It has more on the left than the right.
And that's because my content area is just a little bit too wide. So, I'm gong to adjust that. If you look here, and then look on the left-hand side, you'll see the left has a little bit more than the right does. So, this one's actually being caused by my content area. So, let me move this down, my content is up at the top. And this is where I need to modify that. This width is a little too wide.
Now, how did I figure that out? Well, if you put this into the browser in Firefox, this is where Firebug can assist you. Because if I turn on Firebug, this toolbar here is the web developer toolbar add-on for Firefox. And this one here is Firebug. So if I click that, it opens up the panel down below here. And what I'm going to do is pull this down.
And as I open this area, you'll see. If I hover over Content, can you see how the content is actually extending beyond the width of my page? I hover over the div, you can see there's a lot more green on the left. In here, in the content area than there is on the right. My page is actually extending out beyond the width of the actual page.
Let me do that one more time so you can see. There's a little bit of yellow extended beyond the page width. And that's because my content is too wide. So, I'm going to go back to my page, I'll turn off the web developer toolbar there. Go back to my page, and what I'm going to do is subtract four pixels from my width. I'll go ahead and save this, put it back into Firefox so that I have access to Firebug if I need to, and let's see if these two match up.
And they match up perfectly. So I've just resolved my content area situation, but note what else occurred at the same time. Because I made my content area smaller by four pixels, notice, my column no longer exists on the right, there wasn't enough room for it. So, I need to adjust something else, and I have a few options here, I can adjust the padding, for this column, or I can adjust the padding for this column.
Padding extends the width of a particular content area. So let's see what we have. My left has, this is top, right, bottom and left. Now how can I make this column narrower, this left column? Well I can drop the width down. And the width will control how wide my content area is. Or I can drop down the padding. Because padding is extending the width of my box. So why don't I try dropping this down to 15 pixels. And let's see what happened.
So that should have given my page five more pixels, and notice that's exactly what it did. So I dropped the width of my content area down by four pixels, so I had to drop down my padding by four, and I just added an extra pixel in there just to be sure. So there, is my page right now, it's fitting perfectly, within the content area. Now, it's a matter of minor adjustments to this page, as compared to my graphic design.
But my columns are lined up, my areas have the correct colors, and my footer is all set. So that is how you can use the margin property and negative values within CSS in order to adjust content and fine-tune as needed.
There are currently no FAQs about Exploring CSS Positioning.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.