Running that will result in the two divs “left” and “right” followed immediately by an hr (with no margin at all). Then a 70px vertical margin and finally two more instances of the “left” and “right” divs.
Any ideas? I have the feeling I am missing something very very simple and am headed for a Homer Simpson “DOH!” moment.
Floats are removed from the flow so the margin-top on your hr slides under the float until it hits something solid (i.e something non floated like the top of the containing block) . As there was nothing there the margin had no effect.
If you put your floats in a container with a 1px padding top then the margin of the hr would still slide under the float but would take effect from that 1px padding on the parent. That wouldn’t really help you much because then you would need to always take into account the height of the float.
Therefore for consistent spacing after floats then put a margin-bottom on the float itself which will push a static cleared element further away. Or if the layout allows then float the other element also but you usually don’t want to float everything if it can be avoided.
The hr is displayed differently cross browser and some browsers use background for the color and some use color which means that you need to specify both.
hrs are useful for when css is turned off but usually I set them to display:none and then style an existing elements top or bottom border instead for more reliable rendering.