I’ve been having various problems over the past few days with CSS floats. more specifically, either background images on containing elements not appearing or floated elements acting as if they’ve run out of room in the parent element and dropping down on to “the next line”.
The cause of this is the fact that I haven’t cleared the float before closing the containing element. I have found two ways of curing the problem.
- Clear the float.
- set a min-height on the parent (containing) element. Remembering of course to add a height in your IE specific stylesheet.
This is pretty basic stuff, but it’s been a while since I’ve hit a problem like this in CSS so it makes sense for me to blog it to help me remember next time; and who knows it might help someone else too.
