I encountered something weird this morning. Here’s my code:
So basically both the img and the a tag are block-level elements given the same width and height. The image is floated left whereas the anchor is not. But yet the anchor winds up behind the image.
This is what it looks like: http://www.chrisbeaman.com/test1.html
What’s weird is that when I move the float from the image to the anchor and then switch the order of the anchor with the image in my HTML, the anchor now properly floats left and the image displays to its right. Here’s the code:
And here’s the result: http://www.chrisbeaman.com/test2.html
Why is this? Since they both have the same width and height and are both block-level elements, shouldn’t they behave the same way? Or is there some hidden property that distinguishes a tags and img tags, or elements with background images or otherwise?