Why does this CSS code work?

[adamcannon]

I have three tables that are positioned (relative) 25px from each other.  The code below works fine for this purpose but I'm not sure why.  Precisely, why is div.right set to 50px instead of 25px?

 

div.left
{
clear:left;
float:left;
}

div.center
{
float:left;
position:relative;
left:25px;
}

div.right
{
float:left;
position:relative;
left:50px;
}

[cmgmyr]

"left" is from the left of the page...not from the element next to it. if you wanted to do it another way you could use margin or padding and that would be from the element next to it

[dbrimlow]

You can also remove the "position:relative" elements and that first "clear:left".

 

If you are placing these divs in order, then they are already "relative".

 

The clear:left is then negated by the next command of float:left.

 

That's as if I used,

 

.widths {

width:300px;

width:500px

}

 

The last command always replaces the previous.