Note: This article is meant for CSS beginners.

On Part 1 we focused on static, relative, absolute and fixed positioning. In the second part we will focus on the float property.

The float property is definetly one of the most used properties in CSS. You really have to know it because is vital to create our layouts.

Let’s get started…

First, take a look at this article’s guinea pig. We’ll experiment on it.

By default in our HTML pages, elements have a 100% width and they place themselves one on top of each other.
Floats exist in order to change this. Their main aim is to show elements parallel to each other.
Also when you float something, it’s width reduces just to fit it’s content (unless you specify a determined width size), and stops having the full width of the browser.

Everything will become clearer when we see some examples. Let’s proceed…

The float options

These are:

• float:left;
• float:right;
• float:none;

We can float anything. Divs, paragraphs, images, lists, any HTML tag.
The way to use it is always the same, but sometimes we use floats for pieces of content and other times for blocks in order to create a layout.

Let’s float

To explain myself better, I will separate the examples in floats related to content and floats related to blocks, but it’s really the same thing don’t worry.

Floating content

The CSS

img {float:left;}
blockquote {float:right; width:230px;}

I’m defining a width for the quote to look more compact.

The result

Floating content result (View source or inspect with Firebug).

You see how the elements flow along with them instead of being one on top of the other? That’s cool. However, there is a problem there.

The problem

• The #content element looses the correct bottom padding.

Let’s proceed to block floating and we’ll fix this problem in just a sec.

Floating blocks

The CSS

#wrapper {width:800px; margin:50px auto;}
	#content {float:left; width:450px;}
	#sidebar {float:right; width:200px;}

Why do we define a width for our wrapper element?

Because floats need to be contained. Otherwise, they will end up floating to the edge of the browser. Sometimes that is useful, but not generally.
Two examples of what happens if we have a containing element for floats or not:

Floats without a container element:

Floats with a container element

The result

Floating blocks result (View source or inspect with Firebug).

That looks awful!

The problems

• The #main element is not holding two of it’s children (#content and #sidebar)
• The #footer element is totally jammed.

As I told you, both examples have problems. Of course the second one is the most obvious. Don’t freak out, this was supposed to happen. Let’s solve the problems with one line.

Clearing floats

The sister property of floats is clear.

The clear property has three possibilities as well:

• clear:left;
• clear:right;
• clear:both;

This property will be the one that will solve our problems. Basically the clear property is the one that says: “Hey! Stop floating guys”.
It must be applied to the first element that will not float located after an element currently floating.

Huh? Don’t worry, here you have two examples:

Clearing content

The CSS

#last {clear:both;}

The example

Clearing content example (View source or inspect with Firebug).

I’m clearing both, because I have elements floating left (images) and other floating right (blockquote). If I only have left floating elements, I can just clear left. The same case for elements floating right.

Clearing blocks

Same idea. The thing I don’t want to float is the footer. Let’s apply a clear to it:

#footer {clear:both;}

Now the footer is clearing the #content and #sidebar elements. This helps the container element (#main), to succesfuly wrap around it’s children once again.

Clearing blocks example (View source or inspect with Firebug).

That’s easier than you expected right?

What about float:none;?

Float none is used to override previous floats. If nothing is floating, the float none property won’t do anything. Float none doesn’t mean clearing a float! They are two different things.

Example:

#wrapper div {float:left;}

I’m telling all the divs inside an element with id ‘wrapper’ to float left.
If I don’t want the last div inside #wrapper to float, I should apply an id to it and make an override.

#wrapper div {float:left;}
	#wrapper #lastDiv {float:none; clear:both;}

So that’s the use for float none. I also used a clear to stop the floating chain inside the #wrapper element.

Fixing floats when not having a clearing element

Sometimes we can’t have a clearing element right next to the last floating element. For example:

HTML code

<ul>
	<li>First list item</li>
	<li>Second list item</li>
	<li>Third list item</li>
	<li>Fourth list item</li>
	<li>Fifth list item</li>
</ul>

CSS code

li {float:left;}

So what do we do?

This?

HTML code

<ul>
	<li>First list item</li>
	<li>Second list item</li>
	<li>Third list item</li>
	<li>Fourth list item</li>
	<li>Fifth list item</li>
	<li class="last"></li>
</ul>

CSS code

.last {float:none; clear:both;}

No way! That works fine, but is really nasty.

The solution:

Actually, there are two.

Solution 1 (floating + width)

Give the parent element of the floats a float too and a width.

CSS code

ul {float:left; width:100%;}

Why a width? Because floated elements have an automatic width as I told you before. The UL must have a 100% width to wrap around all it’s list items.

This works in every browser. However, it has a problem. Sometimes giving elements a width of 100% is problematic. This happens in cases in which we have paddings for example. And on top of this, we need to give the next element (after the ul) a clearing property also.

To work around this, here is another solution:

Solution 2 (overflow hidden)

ul {overflow:hidden;}

We must give an overflow hidden (auto works too) to the container element of the floats. This works perfectly in Firefox, Opera, Safari, Chrome and IE8. Most of the times in IE6 and IE7.

To fix it in IE6 and IE7 browsers, take a look at one of my previous articles.

This will always work when you don’t have a fixed height. Why? Because if we have a fixed height the overflow property will either not show the content or add scrollbars, and that sucks.
If you have a fixed height for the floating container use the first solution.

See a live example of solution 2.

Float stacking

I think this is worth mentioning because some people get puzzled with this too.
Floats stack horizontally. This stacking is not the same for left floated elements than right ones.

Left stacking:

This is simple. Now let’s look at float right.

Right stacking:

Take a look at this in an HTML example (View source code or inspect with firebug)
You see? The first element is actually the last one visually. Keep that in mind when you are floating right.

Internet Explorer 6 (IE6) and floats

Sometimes when you float elements in IE6, a known bug called: ‘The double margin bug‘ may appear.

What does the bug do?

As it names suggests, the browser duplicates the margin of the floated element.
This issue can break our layouts; we must fix it.

How can you prevent it?

By never giving the floated element the same direction of it’s margin.
If you float left, don’t use margin-left. If you float right, don’t use margin-right.

Can’t prevent it? the solution:

You can use this hack if you can’t help using the same side margin:

* html div {display:inline;}

It works great. Don’t really ask why. It’s IE6 :p

Optional download

Download all the example files here

Final thoughts

I hope this second article helped you to understand the second part of CSS positioning: floats. This is actually one of the most complex stuff in CSS. You have to practice in order to get a hang of it. When you succeed in controlling it, it’s totally worth it.

Thank you all for the support in this first week of the blog and see you soon with more articles

Note: This article is meant for CSS beginners.

For quite some time I’ve been noticing that when my friends begin to dig their noses on CSS they are easily freaked out and frustrated with CSS positioning.

Static, relative, absolute, fixed, float. What the hell is all this!

I visited Twitter to see if this was a general concern among CSS Beginners and I found that it actually is. Here are some tweets over the last week related to this subject:

@mxcl
Man I hate CSS positioning. Isn’t there an alternative to tables yet?

@MeredithWhitney
now that i know how to use ‹ div›s in css.. i just need to learn how to position them properly. getting there

@Plagiarizr
I’ve been trying to position that fucking twitter icon for 2 hours now. God damn, my CSS skills are dead.

@iMNK
decided that I hate CSS. hrs spent trying to position things 4 a site and no further on. mite look seriously at Ruby on Rails. i <3 OOP

@SirLyric
I win at CSS. On the other hand, it shouldn’t take 4 position: relatives and 4 floats to get the effect I need.

CSS positioning is quite easy. I guess no-one explained it plain and simple before.
I want to be crystal clear about the subject so I decided to separate the post into two parts.

The first part (this post) will focus on the four types of CSS positioning: static, relative, absolute and fixed.

The second part will focus on the float property that is obviously related to an element’s position in our site.

Let’s get started.

Position static {position:static;}

All the elements in our HTML document have a static position by default unless we specify another one. This position is how an HTML element looks like if it hasn’t any styles applied to it. This basically means a bunch of content blocks stacked one on top of the other.

These blocks have a 100% width unless we decide otherwise.

That’s why applying position:static; to an element in our CSS code is redundant, it does nothing.

Position static example (View the source code or inspect with Firebug).

¿A CSS position to make something default for every browser?

Yes, it’s necessary because of the cascading styles. Position static in our CSS code will be always used to override a previous position type from the cascade if we need to.

So that’s position static. The default one. Easy right? Let’s proceed to the other ones…

The other types of positioning (relative, absolute and fixed)

First of all, I need to say that position relative, absolute and fixed are deeply related with other CSS properties:

• top
• bottom
• left
• right
• z-index

Without them, these types of positioning won’t work as expected.

The top, bottom, left and right property values are generally defined in pixels. And they can be both positive or negative. (Example: top:1px; left:-2px;)

The z-index property values are just numbers (Example: 1, 2, 50, 150).

Top, bottom, left and right

These properties work with reference points. These points are different when dealing with relative, absolute or fixed positioning.
Further on the post I’ll explain the reference points for each type.

Z-index, what’s that?

Back to school and maths guys!

The X axis is related to the horizontal measure or movement.
The Y axis is related to the vertical measure or movement.
The Z axis is related to the depth measure or movement.

Of course web is 2D, but elements can be on top of the other using CSS positioning (relative, absolute, fixed).
That’s why it is related with z axis, we can achieve some kind of ‘depth’.

An element with a z-index:3; will be on top of an element with a z-index:1;
The number defines the order of the elements.

Higher number = in front, lower number = the back.

Simple examples:

As a graph:

As photoshop layers:

I’ll show an HTML example later on to finish this idea. For now just keep reading

What do position relative, absolute and fixed share in common?

They separate themselves from the content’s flow. They become independent in a new layer of content.
By doing this, their width is affected; it’s not 100% anymore. They will have the width needed for it’s content to fit, unless we apply a determined width size.

When we look at some examples next you’ll understand this better.
Now let’s look at the different positions and their reference points…

Position relative {position:relative;}

The reference points for relatively-positioned elements are defined by their size.
An example of this in an image:

The images has a fixed size and it’s corners define the reference points.
Let’s move the beetle using position relative:

The css code

img {position:relative; top:-30px; right:-30px;}

The result

In relative positioning we can use one property, or a pair to define movement. The possibilities are:

1. Top
2. Right
3. Bottom
4. Left
5. Top + Left
6. Top + Right
7. Bottom + Left
8. Bottom + Right

To help you understand how the element moves when it’s property has a positive or negative value here is another image:

(Click on it for a bigger size)

Is the same using position relative and a margin?

No, definetely not. You can see why in this example (View the source code or inspect with Firebug).

As I told you before, position relative (and absolute and fixed) separate themselves from the content’s flow, that’s why the element places itself on top of the previous one in this case, while the gray paragraphs with a top margin continue to flow along with the content.

Position absolute and fixed

In absolute and fixed positioning the top, right, bottom and left properties must be used always in pair. The possibilities are:

1. Top + Left
2. Top + Right
3. Bottom + Left
4. Bottom + Right

Why these pairs on relative, absolute and fixed positioning?

Because the browser needs reference points from where to move that object.
If you use a top and bottom property the browser gets puzzled, it doesn’t know in which direction to move it because the reference point is unclear. The same happens when using left and right at the same time.

Their reference points are related to the body tag, the element that wraps all the webpage:

(Click on it for a bigger size)

However they are not the same thing…

Position absolute {position:absolute;}

Position absolute with default reference points (the body tag)

Code example:

HTML

<div class="theParent">
     <div class="theAbsoluteChild">The absolute child content</div>
</div>

CSS

.theParent {}
     .theAbsoluteChild {position:absolute; top:0; left:0; z-index:1;}

Click here to take a look at the example (View the source code or inspect with Firebug).

As you can see, absolute positioned element’s don’t care even about their parent element.

Position absolute with custom reference points

The good thing about position absolute is that it’s the only type in which we can change it’s reference points. So they DO take their parent element into consideration. How we can do that? By making another kind of relationship between the absolute positioned element, and it’s parent (that will be the one defining the points).

To create custom reference points for absolute positioned elements we must assign to it’s parent element a position relative property.

Code example:

HTML

<div class="theParent">
     <div class="theAbsoluteChild">The absolute child content</div>
</div>

CSS

.theParent {position:relative;}
     .theAbsoluteChild {position:absolute; top:0; left:0; z-index:1;}

Click here to take a look at the example. (View the source code or inspect with Firebug).

When an absolute positioned element doesn’t have a parent element with position relative applied to it, it will use it’s default reference points. The onces related with the body tag.

In the example the coordinate 0 0 (top:0; left:0;) is related to the first top left pixel where the parent element starts.

If the element has 5 parent tags, it doesn’t matter, you can choose any of them. The closest parent to the absolute positioned element will be the reference.

That’s easy right? And kind of useful

Position fixed {position:fixed;}

Fixed position looks quite the same as absolute at first, but it’s not really like this. There are three differences:

1. It’s reference points are always related to the body tag. We can’t relate it with a parent element. It ignores it.
2. While in absolute the element stays in one place, in the fixed position it moves along with the scroll bar (See example link below)
3. It’s almost 100% cross-browser except for IE6 that doesn’t understand the property (there are hacks to fix it if you like, google it)

All this is better explained with a simple example: Position fixed example (View the source code or inspect with Firebug). Scroll to check it.

Last thing: z-index in an HTML example

View the z-index example. (View the source code or inspect with Firebug).

Optional Download

Here you can download all the example files.

Final thoughts

Sites are usually done with 95% static elements with float properties (soon in part 2).
Anyway, it’s important for you to know these properties because they are used frequently in sites. But be selective.
It has no sense making everything absolute or relative.

I’ll explain floats soon so you can have a 100% knowledge on positioning of CSS, and decide for yourself when to use each type of position.

I hope the article helps you out and is easy to understand. I tried my best to accomplish that. See you soon with floats

I was browsing the site yesterday and I wanted to know how they were doing their rounded corners. So I grabbed my little friend Firebug (if you don’t have it, go and get it. It’s definitely a must) and I inspected them. I found what they were doing very interesting and I wanted to share it with you.

Demo

Because we always understand it better with a demo:

Visit an online demonstration.

Why their technique is cool?

• No images
• 100% Crossbrowser (Tested in IE6, IE7, IE8, FF, Safari, Opera and Chrome)
• Dimention freedom. Can have any size and never break.
• You can have multiple box styles by just changing few lines in your css.
• Lightweight

Well, here is the catch. We must generate a code that is not semantic. A bunch of spans/divs or whatever you like with no content.

Then why are you showing me this?
Because with a little javascript (Jquery) we can include these elements easily and POOF, our un-semantic code is gone

Let’s get started.

The HTML

Never mind the class names. They are for explainatory purposes. Use shorter names if you want of course.

The final code when the javascript is done:

<div class="roundedBox">
     <div class="roundedBox-content">
          <p>The content of the rounded box.</p>
     </div>
</div>

The inner div is necessary. You’ll see that later.

The code before making our javascript:

The amount of tags we need will be relative to the corner size. The bigger the corner, the more tags we need.

You can choose any HTML tag you want to make this. I will be using divs and spans.
The tags that will create our corners are the following:

The top corners

<div class="c t t1"><span></span></div>
<div class="c t t2"><span></span></div>
<div class="c t t3"><span></span></div>
<div class="c t t4"><span></span></div>
<div class="c t t5"><span></span></div>
<div class="c t t6"><span></span></div>

Class c stands for corner. Class t stands for top, and class tx for the number.

The bottom corners

<div class="c b b1"><span></span></div>
<div class="c b b2"><span></span></div>
<div class="c b b3"><span></span></div>
<div class="c b b4"><span></span></div>
<div class="c b b5"><span></span></div>
<div class="c b b6"><span></span></div>

Class b stands for bottom and class bx for the number.

I’m using 6 divs due to my corner’s size. This will depend on the corner radius you are planning to make (as I said before).

This would be the final code for each box before creating the javascript:

<div class="roundedBox">
     <div class="c t t1"><span></span></div>
     <div class="c t t2"><span></span></div>
     <div class="c t t3"><span></span></div>
     <div class="c t t4"><span></span></div>
     <div class="c t t5"><span></span></div>
     <div class="c t t6"><span></span></div>
     <div class="roundedBox-content"></div>
          <p>The content of the rounded box.</p>
     </div>
     <div class="c b b1"><span></span></div>
     <div class="c b b2"><span></span></div>
     <div class="c b b3"><span></span></div>
     <div class="c b b4"><span></span></div>
     <div class="c b b5"><span></span></div>
     <div class="c b b6"><span></span></div>
</div>

As you can see, if we don’t integrate this technique with javascript it totally sucks, because it’s extremely hard to manage and maintain. But with the integration with Jquery it goes really smooth. When we create new content we won’t even worry about this.

Now let’s look at the CSS Code, the one that makes the magic.

The CSS code

My divs will have borders. To to this, I will assign a border on both left and right sides of the extra elements, and give them a margin too. With only that, the corners will be done

1) Simple reset + body tag

* {padding:0; margin:0;}
     body {background:#D6DED4; font:85%/150% Helvetica, Arial, sans-serif; padding:20px 0;}

2) The box

.cornerBox {width:600px; margin:50px auto;}
     .cornerBox-content {padding:20px;}

1. We define a width and margin (just for the example. It’s not really necessary).
2. We apply a padding to the content (just for the example too).

3) The corners and their borders

.c, .c span {height:1px;}
     .c span {display:block; overflow:hidden;}

     /* borders */
     .cornerBox-content,
     .c span {border-left:1px solid; border-right:1px solid;}

We define a height of 1px to every extra element and apply a display:block; to the span inside. The overflow hidden property is there due to IE6. If we don’t use it, it creates something  weird.

4) Making the curve:

A rounded cornered box has a symmetry between the top curve, and the bottom one:

As this little sketch shows, the first top element’s width (t1) is equal to the last bottom’s one (b6). This can be applied to the rest of the elements too, because their distances are just the same, but inverted.

Taking this into consideration, we can define the left and right margins to both the original and the inverse element at the same time. So, let’s create the curve

.t1, .b6 {margin:0 7px;}
.t2, .b5 {margin:0 5px;}
.t3, .b4 {margin:0 3px;}
.t4, .b3 {margin:0 2px;}
.t5, .b2 {margin:0 2px;}
.t6, .b1 {margin:0 1px;}
     .t1 span {border-top:1px solid;}
     .b6 span {border-bottom:1px solid;}

Of course the first top element (t1) and the last bottom element (b6) have a top and bottom border to assure that the border doesn’t break.

The code is ready. Now we just have to add id’s or classes to style each box as we like. We can style them completely differently with just a few lines. I’ve got three examples:

Type 1: #cBox1

The code:

/* Box 1 */
#cBox1 .cornerBox-content,
#cBox1 .c span {background:#FFF; border-color:#BED2CD;}

The result:

Type 2: #cBox2 (Other colors)

The code:

/* Box 2 */
#cBox2 .cornerBox-content,
#cBox2 .c span {background:#728776; border-color:#4E6257; color:#FFF;}

The result:

Type 3: #cBox3 (With a gradient)

The code:

/* Box 3 */
#cBox3 .cornerBox-content,
#cBox3 .c span {border-color:#728776;}	

#cBox3 .t span {background:#C5D3C3;}
#cBox3 .b span {background:#B2C3B0;}

#cBox3 .cornerBox-content {color:#333F35; background:#B1C3B0 url(../images/box3.png) repeat-x 0 0;}

The result:

That’s easy!

Finally, the Javascript (Jquery)

Create a variable for the top corners and another one for the bottom corners. They will have all the extra elements.

var topCorners = '
     <div class="c t t1"><span></span></div>
     <div class="c t t2"><span></span></div>
     <div class="c t t3"><span></span></div>
     <div class="c t t4"><span></span></div>
     <div class="c t t5"><span></span></div>
     <div class="c t t6"><span></span></div>
';
var bottomCorners = '
     <div class="c b b1"><span></span></div>
     <div class="c b b2"><span></span></div>
     <div class="c b b3"><span></span></div>
     <div class="c b b4"><span></span></div>
     <div class="c b b5"><span></span></div>
     <div class="c b b6"><span></span></div>
';

Now apply them before and after the box’s content:

$('.cornerBox-content').each(function(){
     $(this).before(topCorners);
     $(this).after(bottomCorners);
});

That’s it!

Final thoughts

The smaller the corner, the less noticable is the element separation. A less contrasting border from the background too.
Because whether you like it or not the corners seem kind of pixeled.

The technique is very versatile and especially interesting to use in large sites. Be creative and explore the possibilities…

Demo + Download

• Visit an online demonstration.
• Download the files.