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

Unlock the full course today

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

Clipping content

Clipping content - CSS Tutorial

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

Start my 1-month free trial

Clipping content

One of the things that absolutely positioned elements allow us to do that we can't do with other element types is to use the clip property. Now the clip property allows us to essentially crop an element and its contents. Let's take a look at that by opening up clipping.htm, which you can find in the 04_05 directory. And the page structure of this one has changed a little bit. Instead of our normal three div tags that we have been using, essentially we have a section with a class of container, and now inside of that we have a div that has a paragraph inside of it as well. So we want a little bit more content inside of this so that you can actually see the clipping taking place. So essentially we are just going to crop that content down a little bit. I am going to preview that in the browser for you, so you can see what's kind of going on here, and here is the content that we are going to be clipping. You can see it's being positioned using absolute positioning. So what values can we…

Contents