CSS Tips

CSS overflow: hidden

The CSS overflow: hidden property can be used to reveal more or less of an image based on the width of the browser window. The technique works in Gecko, Opera 7 and IE6. When something has a width or height defined that is shorter than the element, the overflow: property decides whether to hide the remaining part of the element, or show it. By default it is set to visible. But you can hide the overflow if you wish and crop an image in a flexible way.

An example of this is the photo on the training site. Try resizing your browser. The photo has a width of 200 pixels but it will reveal more or less of an image based on the width of the browser window. The following is the relevant CSS from wireframe.css

#nav {
width : 20%;
}

The following is the relevant CSS from overflowimage.css.

div#overflowimage{
overflow : hidden;
margin : 0px;
padding : 0px;
width : 100%;
}

According to CSS2 specification, the oveflow property forces the user to clip content and that no scrolling mechanism is provided to view the content outside the clipped region.

<< previous | next >>