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.
My web page now has the third column, which I'm referencing as the right ID added onto the page. So, here is my right column, which is actually the third column in my design, and within that right column, I now have three images added. What I want to do is add the text content that's going to go below these images within the content area. So I will go ahead and add the remaining content within the right div. I do have that available down in the text right column file.
If I open that up, here is the content to go into the right column. So I'll just copy that from the text right column file, move over to my header, and I'm going to place it directly below those images. So I'll paste it down here. And then I can simply select all five lines, hit the Tab key a couple of times, but notice that when I hit the Tab key, it doesn't always perfectly line up. So, there are ways, in the different editors, to get these to line up. It's just as easy for me to do this real quick to get them lined up. I like to try and keep things as neat as possible, within my code view. So when I open these files up later, I can locate the content in the area I need to modify quickly.
My right div is now complete in terms of the content for that particular column. The other thing I want to do is, you can see that these are pretty spread out. There's no reason to have to scroll so much on the page. What I can do instead is just delete these lines. I'm just putting my cursor in and hitting backspace. Now, you can see if the line is pretty long, it pops over to the right, and that is an Editor Detail. I could go ahead and turn on Word Wrap within CoffeeCup, but I think it's much neater to keep it off, so, you can see the exact tags, right in a line, and see what I'm doing.
I will go up, and I have my right div all set up in terms of the HTML piece. The next step would be to go up and start creating the CSS rules for this piece. But right now I'm focusing on just completing the content within the div. I will save this, and take a look at this in the browser. Let's see what the right div looks like with pure HTML assigned. Now here is my header div, here is my menu div.
My left column, and this column will ultimately go up alongside my menu. So I reference that as the left column. And this is the right column. By default, the images line up alongside one another, because they're spaced. And my text is default size Times font, and goes below the images. What you're looking at is our content within the div.
The div is moving that content down into its own space. And this is all default HTML positioning based on our HTML tags. If I want anything different from how it looks now, I need to move into the CSS rules. But that is a right div, complete with content in it's default view based on our HTML tag setup. It's always best to add the content, take a look at how it is by default in HTML. Before you move into adding any type of CSS to the page. It's difficult to know what you need to do in CSS until you see what HTML has done to your content.
So our right column of content is now all set in HTML.
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.