block inside of red
inline-block inside of red
inline-block inside of red
inline-block inside of red.
Experiment with different screen widths.
block inside of red
absolutely positioned block inside of blue.
Also note that the main blue box has no height because it has only floating elements.
fixed-width float left block inside of blue.
note that green's text is wrapped around this.
float left block inside of blue
fixed-width float left block inside of blue.
note that green's text is wrapped around this.
absolutely positioned block inside of green.
Unlike the relatively positioned block, it doesn't displace later divs in green or wrap around blue's floats.
If it were not fixed width, it would stop at the right edge of the screen.
It appears on top of the floats, but beneath the relative and fixed blocks.
block inside of green
relatively positioned block inside of green.
This is the size it would be if it were normally positioned,
but it's displaced, so it goes off the edge of the screen.
This text was wrapped around blue's floating divs before its position was adjusted.
third block inside of green.
It's positioned below where the second one would be, even though that one has been moved relative.
Again, the text is this is wrapped around blue's floating divs, even though they're in a different div.
fixed positioned block inside of green.
This gets its starting position (left and top) from its container,
but it then stays in a fixed place relative to the screen, not the page.
fixed-width inline-block inside of magenta.
Note that in the source these inline blocks come before the float blocks.
inline-block inside of magenta.
If the screen is narrowed enough, the float blocks will be pushed below these.
fixed-width float block inside of magenta.
fixed-width float block inside of magenta.
Note that green's relatively positioned block stomps on everything, even floating blocks.
block inside of cyan.
inline-block inside of cyan, with a width of 45%.
That makes 90% for both of these divs, leaving 10% for padding, margins, and borders.
inline-block inside of cyan.
Padding, margins, and borders take up 118px,
so if the screen is less than 1180px wide, these blocks won't fit side-by-side,
and this will drop down below the other.
block with a width of 800px.
If this doesn't fit within its container block, it'll extend out past the right edge.