Home arrow Style Sheets arrow Page 2 - Introduction to CSS Positioning Properties Part 2
STYLE SHEETS

Introduction to CSS Positioning Properties Part 2


In this second part of a two-part article, we examine more positioning properties available in the CSS2 specifications, and use what we've learned to build a simple drop-down menu without employing any JavaScript.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 14
February 28, 2005
TABLE OF CONTENTS:
  1. · Introduction to CSS Positioning Properties Part 2
  2. · The "clear" property
  3. · The "z-index" property
  4. · The "visibility" property
  5. · The "overflow" property
  6. · A simple drop-down menu using the "overflow" and "display" properties

print this article
SEARCH DEVARTICLES

Introduction to CSS Positioning Properties Part 2 - The "clear" property
(Page 2 of 6 )

This property is used to give control of an element that appears after a floated element. Setting this property on the selected element will ensure that it will appear below any floated boxes that come before it. The possible values taken are the following:

clear: left;

The selected element will be displayed below any left-floating boxes being rendered before it.

clear: right;

The selected element will be displayed below any right-floating boxes being rendered before it.

clear: both;

The selected element will be displayed below any left-floating or right-floating boxes being rendered before it.

clear: none;

The selected element will not clear any floating boxes that come before it.

Let's show some examples that implement this property. Let's suppose that we've created a simple two-column layout, displaying a left-floated navigation bar, and a main container, floated to the right.

We need to be able to display a footer section after they're visually rendered. Just utilizing the "clear" property, that section is properly located.

<style type="text/css">

#navbar {

     float: left;

     width: 20%;

}

#content {

     float: right;

     width: 79%;

}

#footer {

     clear: both;

}

</style>

And the markup would be the following:

<div id="navbar"><h2>Navbar</h2></div>

<div id="content"><h2>Content</h2></div>

<div id="footer"><h2>Footer</h2></div>

As we can see, the "footer" section clears the floated elements, and is displayed in the right way. There are many websites using these kinds of hooks to nicely implement page layouts. In fact, the floating approach is quite powerful for achieving several page layouts. It makes it even easier to emulate <table> designs, and the code is a lot more concise.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

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 
Support 

Developer Shed Affiliates

 




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