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 want to talk about the Float Property in CSS. This property can be a bit confusing when you first start working with it. It does have two values available to it, and those are left and right. So, I want to demonstrate the float property and show you what this property means, and how we can use it to create a column structure on a webpage. I have a webpage right here called Float Need, and I have three div tags on the page.
Each div tag contains two sentences of text. And if I put this in the browser, all I'm seeing are those sentences of text, each div on its own line, because that's what a div tag does. It places the content inside the div on its own line. So, what we're basically looking at is the default HTML view for this coding on the page. What I've also done is set up some styles up above, and the style rules are set up so that we can play with each individual div as needed to demonstrate the float property.
I have these within CSS Comments, so you can see it's all light grey at the moment, which means those styles are not applying. What I will do is eliminate those comments, and you can see now my code has some color coding to it which means it's now been activated. What I've done for each one of these divs is create a style role for the ID based on the ID name and the div tag. I've assigned 300 pixels of width, added a border and a background color just to make it easier for you to see which column is which. I'll go ahead and save this page, and let's take a look at it now in the browser.
You can see it set the mall to 300 pixels wide and attached a color to each one. This will just make it easier for you to see what's going on as I add the Float Properties. Let's add a float to the left column. So I simply say float:, and the two properties I have available are left or right. And you end each line with a semicolon. Let's see if it changed anything in the browser.
And you can see, it didnt. My left column was already located on the left-hand side so it didn't move because of the float property. What I will do is copy this. That was a code hint that just popped up. You can Ctrl + C or Cmd + C, and then Ctrl + V to paste. Just move that to get it lined up, and the same thing down here.
What I'm doing is adding a float left to each one of these divs. Now, when I save the page, you'll be able to see a difference in the browser. Now, what's happened is you can see my blue column, or the middle column, has pulled up alongside the green column. It doesn't look like the salmon colored or orange colored column has done that same thing. But that's only because my browser window is a little narrow. As soon as my browser window gets wide enough, I can pull it over.
But notice as soon as this gets small, it pushes it down underneath again. So, what float does is tell the content to float along the left-hand side of the content before it in the HTML. But only do this, if there's space for it. Now, if I put this all the way across, you can see everything's lined up left in the browser. I have all this space on the right-hand side. So, that is what a left float does. Now, let me modify this right column.
And instead of saying left, what I'm going to do is say right. Now, when I float this column right, you'll see it it almost like super glue to the right-hand side of the browser. It's not going to move. It's going to stay along that right side. The reason it's called a float is, as you can see, now that I have it right aligned it's a little easier to see it. As long as there's space for it, it comes out on the right-hand side since these two divs are in the HTML before it. What this is literally doing is floating vertically along the right-hand side, floating vertically along the left-hand side.
So, as I pull it together, you can see it pops down as there's space for it, it pops up. So, that's why it's called a float. It's not in a specific location vertically, other than based on the code on the page. Now, I don't want all of this stuff moving around in this manner, so what I'm going to do is put this back to a left float. And with my left float, things will line up as long as there's space for them.
So, we'll take a look one last time. And here is my content. Soon as there's space for the second column, or the middle column, it pops up. As soon as there's space for the far right, it pops up as well. So that is the Float Property in CSS, and the two values available, left and right, for the Float Property.
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.