Home arrow Style Sheets arrow Introduction to CSS Positioning Properties Part 2

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
  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

Introduction to CSS Positioning Properties Part 2
(Page 1 of 6 )

Welcome back! Here we are again, in order to closely look at more CSS Positioning properties. In part 1 of this article, we've explained some basic definitions and explored different commonly used properties. Now, it's time to move forward and find out more about them.

In this second part, we'll be explaining even more handy properties, and presenting other examples you'll find useful for real client-side applications.

Let's not waste more time in preliminaries.

The " float " property

This property is quite useful to achieve some common effects. One of the most usual techniques is to build floating boxes around image elements, in order to make the content float according to the corresponding image, and display some kind of description. Our example could be implemented by creating a box where all of the images contained are floated to left.

<style type="text/css">

#imgbox {

     width: 20%;

     background: #ffc;

     padding: 10px;

     font: normal 11px "Verdana", Arial, Helvetica, sans-serif;

     color: #000;

     border: 1px solid #000;


#imgbox img {

     float: left;

     margin-right: 10px;



And the markup would be the following:

<div id="imgbox">

<img src="css.gif" alt=" CSS are powerful" width="100" height="75" />

This is a floating box, useful to display some additional content.


The visual output for the above code is illustrated below:

The float property takes three values. Float is ignored if you have set the "position" property to either absolute or fixed. Let's present the possible values assigned to it:

float: right;

The box is floated to the right of the screen.

float: left;

The box is floated to the left of the screen.

float: none;

The box is not floated.

This property is often used to implement efficient page layout without the need to absolutely position containing elements, since they're simply floated to the left or right, according to the desired layout effect. For instance, we might have a left navigation bar, a general container for main content and a third bar positioned to the right. Just by making the left bar and main container float to left and the third bar float to the right, we'd have built up a nice three-column layout.

However, a question remains: how can we properly position an element after a floated element is rendered? That's when the "clear" property becomes very handy. Let's take a look at it.

blog comments powered by Disqus

- 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 

Developer Shed Affiliates


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