Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
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 have just applied the Float Property to my three columns of content on the page. And what I want to do now is work within the box model in CSS to spread these out a little bit more. I'll be looking at the margin and padding properties of these three divs on the page, and fine-tuning them so they fit a little better, underneath my header. Let's take a look at adding or modifying properties for a div tag within CSS. Now, if I take a look at this page, and I'm doing it right here to make it easy, you can see my three divs lined up next to one another. But I do have some space over here.
You can also see that my text is pretty tight along the edge of each one of these div tags. So, I'll start at the left and work my way over to the right. Now, my menu here doesn't look too bad. I may want to move my first link, my home link, down a little bit. And I can do that by adding some padding at the top of this menu div. So, I'll go to the menu div, which I have right up here.
I have a left padding here on this menu box, and that's why my text is over from the left-hand side by 23 pixels. I'm going to do that same thing, adding some padding at the top of this box as well. So, I'll go into my CSS and put in padding top and let's say maybe 15 pixels. If you're unsure what to start with just pick a number, you can see that my home link has moved down by those 15 pixels. And it looks fairly well lined up with this colomn of text at the moment. I might even want to move it down, just a little bit more. Because I think this is a little tight as well.
So, let me switch this. I'll change it to 25 pixels. And let's see how that looks. Now, that's a pretty substantial change, and I don't have pixels in here. So, you can see if it can't understand it, it doesn't know what to do, so most browsers will do nothing. There we go. I think that menu looks a little bit better. Now, it's so easy to modify this just by changing this padding top number.
I'll leave this one as it is. And once I get these other two set up the way I want, I can always come in and move this down a little bit. If I decide to reduce that number 25x2 or 3 pixels, or whatever is needed to line up with the rest of the content. Other than that, my menu looks pretty good. So, I really can take the border off my menu as well. Don't really need that anymore. I'll get rid of it, and you can see my menu looks great. Now, let's move on to the next column, and it's basically the same process with all of these.
Now, my left column is this one here. So, what I'll do is move the CSS up. I'm going to want to put some padding on this box, and there's a couple of ways to do it. I can specify just padding left, padding top, right or bottom. There's four sides to a box, or I can just use the property padding. Just all by itself.
And if I use padding all by itself, what it does is add the padding to all four sides at the same time. So, you can see now I have 20 pixels and 20 pixels on the left. Now, my padding might be a little high. That's kind of a personal preference. So, if I decided I didn't want 20 on all four sides, I can go back to adding just the left and top or I can be more specific just using padding. So, what this means is the first number is top, right, bottom and left. Think of it like a clock where you start up at 12, 3, 6, and 9. So, you go clockwise around the box.
So now, if I want to eliminate a little bit of padding on the top of this box, I can just change padding. And instead of 20, I can put it to 10. And you can see how this is moving up and down based on the numbers I place in here. So, this first number is top, right, bottom, and left. That looks pretty good. I've got some padding all the way around my box. I've also got some padding at the bottom.
I think I can eliminate this border now from my box. So, I'll go ahead and delete that, and you can see my page is starting to come together. So, that is how I can start fine-tuning each div tag once the floats are lined up. What I'm doing is modifying properties within each div, specifically the properties of padding so far. I didn't work with margin. I generally worked with padding to add some space inside the box for my content to spread this out. You can see now that that's been done.
I have just a little bit of space on the right-hand side in my right column to customize as well. But that is how you can fine tune your div tags, using both pattern and margin, and border. Now that we have it set up, we can remove it. Our page is looking pretty nice.
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.