Multiple opposing float troubles
I’ve been having a lot of trouble trying to get my layout to look the way I want it. The following image shows what I was aiming for:
Description of image:
- content_container is just a default div with margins such that it’s centered
- There are multiple article div’s, each just a default div
- There is one article_icon div per article, it’s floated left
- #right1 is a right floated div inside #content_container
- #right2 is a right floated div inside #content_container, it has clear: right set so that it appears beneath #right1.. it’s about half the width of #right1
Unfortunately whenever I tried this, adding a clear:right to the second right float would cause the left float to move downwards on FF and Opera but IE still rendered alright.
In the end I’ve now stuck both the right floats into a single right float, i.e. so there’s no need for a clear: right, which works but doesn’t look as good…