Introduction to CSS Positioning Properties Part 2
(Page 1 of 6 )
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.
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;
}
</style>
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.
</div>
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.
Next: The "clear" property >>
More Style Sheets Articles
More By Alejandro Gervasio
/ 9 
