How do the CSS top bottom left and right attributes work?

Question

I was wondering what the logic was behind the CSS attributes for top, left bottom and right.

for exa

Answer 1

The float properties are relative to other elements in your document. The top, right, left, and bottom properties are relative to the edge of that element. They add margin of that amount to the specified side of the element.

float: left; says "I'm going to float to the left of other elements next to me.

right: 5px; says "The closest element has to be 5px away from me when on the right side.

It's a matter of selflessness vs. selfishness. See the W3C Wiki for more information.

Also, keep in mind that top, right, left, and bottom properties only work when position is set.

Answer 2

top, right, left, and right; refer to specific coordinates in the screen (or container) whereas float:right, and float:left respect the padding the container may have set previously.

For instabnce in the DEMO I include here. You will see that both elements are inside the same wrapper. The float is restrained to the wrapper width and padding. The other element is following specific instructions to be located where I want it. In this case 100px down from the top and 0px from the right (of the screen)

There is a misconception where some developers think it follows the top-left coordinate of the screen as (0,0). Not exactly. As far as position absolute goes every edge is a 0. So when you say left:10px. It means 10px towards the center of the screen. Same for right:0px. It means 10px towards the center of the screen from the right edge.

Answer 3

Well, you need to understand the concept of positioning for this. Let us try to understand this. Consider you have the following structure:

HTML:

<div id = "divContainer">
    <div id = "divElement"></div>
</div>

CSS:

#divContainer {
    height:300px;
    position:relative;
    width:300px;
    background-color:Red;
}

#divElement {
    height:150px;
    position:absolute;
    width:150px;
    background-color: Orange;
    right:0px;
}

See this here: http://jsfiddle.net/3mQk2/

As you can see, the divElement sticks to the right end corner of the divContainer. This is because position:absolute takes the element out of the normal 'flow of the document'. This in itself does not move the element (remove the right:0; and see). When you provide the right:0 value it understands 'make the distance between the current element (divElement) and its container 0px on the inside right side of the container'.

This also happens because the container has position:relative attached to it. If instead, the position property of the container was set to static (which is the default by the way) in this manner:

#divContainer {
    height:300px;
    position:static;
    width:300px;
    background-color:Red;
}

Then divElement's container would have been the window element and not the divContainer(yes, this is a aha!moment to many). In that case, the divElement would have 'stuck' to the corner of its container (i.e. the window).

You can see this here: http://jsfiddle.net/35qc2/

Hope this helps.

EDIT: i know what it does, i was more wondering why the syntax of right:0, i know that position:right; doesn't exist but it would make more sense syntactically than right:0px.

This is the comment you have made above. Let us try to break this down and examine it.

"I know that position:right; doesn't exist"

Yes, you are right. position:right does not exist.

But it would make more sense syntactically than right:0px.

Nope. It wouldn't. For this, you have to understand the fundamental responsibility of the properties. i.e.:

position property: HOW the element is to be positioned.

top, right, bottom, left: WHERE the element is to be positioned.

That is these properties (top, right, bottom, left) are dependent on the position property.

That's why these properties have no effect when the position property is set to static. They only come into picture when the position is NOT static.