Annoying CSS

October 21st, 2007

Having completely exhausted a search for floating some images at the bottom right hand corner of a variably sized <div> and deciding this was impossible I came up with half a solution involving a normal float RIGHT <div> that cleared a second, hidden floating <div>, the height of which COULD have been determined by the overall height of the containing <div>. But it wasn’t great, and text would wrap very poorly around the images, cutting into the padding and margins. Using EM on the buffer’s height meant I could make it vaguely change in line with textsize changes but generally it looked crap and was different in every browser.

So instead I dropped that dream of two sets of images, one at the top left, the other at the bottom right and cheated and decided on using only the top left set, and a bottom right aligned background image to allude to the visual effect. Only I thought perhaps having a nice pyramidal effect would look good. And it should be easily achieved in CSS using a float and clear mechanism.

Only Internet Explorer had different ideas. Above is how a lot of browsers rendered the floats, including Safari, Opera and Firefox. Below is how IE thinks it should look, so now I am left trying to find out a solution as to why only the images with the CLEAR parameter are being moved down and not the images following on. Something to do with displaying inline or block perhaps… If and when I find a solution I will update this.

http://css-class.com/articles/explorer/floats/floatandcleartest1.htm

Update:

I have fixed this problem by using what I would consider a pretty brute-force method in the CSS world and that is using three specifically sized divs to create the text wrapping effect and then used position:absolute to place each image individually where I want it.

It looks exactly the same in all the browsers and now IE can join the club.