Question

When a static block element follows a floated element it will fill the remaining space available to it.

So, for example .right will take a width of 80%:

.left {
    background-color: red;
    float: left;
    width: 20%;    
}

.right {
    background-color: blue;
}

http://jsfiddle.net/yryZR/

However, when a block element with position: relative follows a floated element, the floated element seems to be ignored and the relative element takes 100% width:

.left {
    background-color: red;
    float: left;
    width: 20%;    
}

.right {
    background-color: blue;
    position: relative;
}

http://jsfiddle.net/yryZR/1/

According to the W3C “Once a box has been laid out according to the normal flow or floated, it may be shifted relative to this position” (source)

So if I am not changing the left or right positions of the element, why does it set itself to the very left of its parent element rather than stay in the normal flow?

Answer 1

position:relative refers to the position the element would’ve been in had there been no CSS positioning overrides – e.g. its natural unaltered position.

floated elements are essentially removed from document positioning calculations, so your left element is invisible for the right element’s positioning, so it takes the size of the next higher element – the container that these two left/right boxes are in.