From the course: CSS: Float-Based Page Layouts (2012)

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Positioning elements: Solution

Positioning elements: Solution - CSS Tutorial

From the course: CSS: Float-Based Page Layouts (2012)

Start my 1-month free trial

Positioning elements: Solution

“

Hopefully, you were able to complete the positioning elements lab without too much trouble, and without getting too mad at me. Now, if you did get stuck, don't feel bad. It takes a while to fully understand how positioning works. So let's take a look at the finished files and how I coded those elements. So again, I have the index.htm and the main.css files open. Now, this time I went into the 04_07 folder and into the finished_file folder, so I'm opening from there. For the banner, I'm going to scroll down to about line 270 or so, and we go there. There is my banner style. And again, I'm previewing this in the browser, so we can sort of visualize kind of the solution that's happening here. Okay, now the banner paragraph is the one that I'm having to position. Now, I had to go ahead and take in the account of the padding of this when I set the width and the height values. So, taking the padding into account, I've set a height value that's equal to the height of the banner above it, and…

Contents