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.
What I'm now going to do for my webpage is apply the float property in CSS to each of my divs that needs this property applied. So, let's take a look at adding floats to the different div tags on my page. So, I have the page in the browser right now. Each one of these outlined areas is a separate div. So, here's my menu div. Here's my left column div, and here's my right column div. And what I want to do, is get these div's lined up in a three column structure, instead of underneath one another.
And the float property will help me do that. The first thing I want to do is figure out which box needs the float property first. Let me take a look at Dive with ScubaBlu, and this is the left column here. So, this is the ID, called Left, and what I'm going to do with that column, is add a float property. Now, I'm going to float this left. I'm going to apply left floats to all of my content.
So they will line up right alongside one another. And you'll see in a moment what I mean by that. So, what I did was applied a float left to my content. Now this doesn't look like it moved at all, so it all seems kind of strange. Float left did nothing. Let me apply float left to my menu. I'm going to copy this, and apply it to my menu as well.
I'll go ahead and copy and paste that in here, getting it lined up. So, my menu has a float left. My left has a float left, and while I'm in here, I might just as well add a float left to the right-hand side, as well. So, let me save this. So, the menu left and right div's on my page. Now have float applied and look what happened to my page.
Now I have these set up to float left, so what happens is they're going to end up right alongside one another. So, here is my menu, it is floating left. Here is my left, which is floating left. And my right which is floating left. So, they end up going right along side one another. Now I do have borders on each of these. So, I can see what I am doing while I am setting these up. These won't end up having a border on them.
It's just to help me figure out from my positioning stand point what I need to do. But my webpage looks a lot more like a webpage now that I have a column structure. Now what else do I need to do? Well, I could use some padding between these, and that's what's going to end up taking this extra space. But for now, at least I have these lined up alongside one another. Now what happens if I remove the float left from my menu? Let's take a look at that. Let me take my float left from my menu and get rid of it. Will it really make a difference? Let's check it out. All I did was eliminate float left on my menu, and look what happened. Technically, what float left does is remove the content from the normal flow of the page, and tell that content, don't go where you would normally go, go up along the left-hand side of whatever is before it. So this div, instead of coming up alongside here, which is what it did with the float, it's doing what my div tag is designed to do. It's putting that div content on the next line.
So, my menu does need the float property. When you apply a float you have to look at the content before the column you're trying to line up. If my menu doesn't have a float, you can see it does what HTML tells it to do, which is take that div and put it on its own line. I'll go back and reapply that float menu to my page, I'll put it right back in there, controller Cmd+Z will undo what I changed.
So, now that that's back in my page should be lined up, let's just make sure that column is back where I need it to be. And it is. There's still definitely some fine tuning to be done on the page. But I now have my page in a three column layout. And you can see, by using floats, how easy it is to do. I take this and float, I take this and float, and I take the last one and float.
Now what happens if I remove this float? Let's quickly take a look at that. I'll get rid of that one, save the page, and do we really need the right float, or not? Well, we definitely do. So, all three columns need a float property to them. So, I'll put my float right back where it needs to be. That is how you can create a column structure using the CSS property called Float.
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.