Home arrow DHTML arrow Page 4 - Borders and More with Style Sheets

Borders and More with Style Sheets

If you're looking for a thorough resource on style sheet properties, you've come to the right place. This article, the third part of a series, covers borders, bottom edges, and more. It is excerpted from chapter four of Dynamic HTML: The Definitive Reference, Third Edition, written by Danny Goodman (O'Reilly; ISBN: 0596527403). Copyright © 2006 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.

Author Info:
By: O'Reilly Media
Rating: 5 stars5 stars5 stars5 stars5 stars / 16
September 13, 2007
  1. · Borders and More with Style Sheets
  2. · Even More on Borders
  3. · Alphabetical Property Reference: Bottom
  4. · Clear Property

print this article

Borders and More with Style Sheets - Clear Property
(Page 4 of 4 )

IE 4 NN 4 Moz all Saf all Op all CSS 1

Inherited: No

Defines whether a block-level element allows itself to be displayed in the same horizontal band as a nearby floating element, such as an image. Typically, another element in the vicinity has its float style property set to left or right . To prevent the current element from being in the same band as the floating block, set the clear property to the same side ( left or right ). If you arenít sure where the potential overlap might occur, set the clear property to both . An element with a clear property that is set to a value other than none is rendered at the beginning of the next available line below the floating element.

CSS Syntax

clear: both | left | none | right

Value                  Any of the following constants: both | left | none | right .

Initial Value        none


<img src="logo.gif" height="40" width="60" style="float: right">
<h1 style="clear: right">Giantco Corporation</h1>

Applies To            Block-level elements.

Object Model Reference


IE 4 NN 4 Moz all Saf all Op all CSS 2

Inherited: No

Defines a clipping region of a positionable element. The clipping region is the area of the element layer in which content is visible. If you encounter problems clipping an element, wrap the content-holding element inside a block-level element whose clip property is set to the desired region.

CSS Syntax

clip: rect(lengthTop lengthRight lengthBottom lengthLeft) | auto


Extending to CSS2.1, the only shape recognized for the clip property is rect. Other shapes may be admitted in the future.

When specifying lengths for each side of the clipping rectangle, observe the clockwise order of values: top, right, bottom, left. See the discussion about length values at the beginning of this chapter. A value of auto sets the clipping region to the block that contains the content.

Initial Value        auto


<span style="position: absolute; clip: rect(10px 110px 80px 10px)">
<img src="desk1.gif" height="90" width="120">

Applies To            Block-level, replaced, and positioned elements.

Object Model Reference


Please check back next week for the continuation of this article.

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus

- Text-Justify, Volume, and Other Style Sheet ...
- Ruby-Position, Size, and Other Style Sheet P...
- Padding, Pages, and More Style Sheet Propert...
- Marks, Orphans, and More Style Sheet Propert...
- Layouts, Margins, and Other Style Sheet Prop...
- Floats, Fonts, and Other Style Sheet Propert...
- Color, Filters, and Other Style Sheet Proper...
- Borders and More with Style Sheets
- Learning Style Sheet Properties
- Style Sheet Property Reference
- Completing a Noisy Image Application
- An Object-Based Approach to Building Noisy I...
- A Basic Method for Building Noisy Images
- Adding More Features to Sliders with the Scr...
- Using Sliders with the Scriptaculous Framewo...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials