when I resize the window down from full size to activate the 2 column version I have set up, I have two items which stay floated to the right. What I want is for the first one on the right to be floated back on the left side and the other stay on the right beside it.
However, I tried making a new block class and calling the first one 2a and floating it left. This did not work, it put the item in the middle of the page for some reason.
I thought if I made a new class for this one item I could use it opnly for this resize and have it default back as normal for the full size version.
If I were you, I’d set them all to float: left; and they would just happily rearrange themselves as needed. You’ll just have to make adjustments to margin/padding etc.
A better option than float: left would be display:inline-block, as then you could do away with the fixed heights. You’ll then just need to feed display:inline to older versions of IE, though.
The problem i’ve found with trying tosetting them to float left is that when the site is expanded from 600px outwards the blocks will stay very close the previous block as the site expands.
I am not sure how the inline block method would fix it?
Not totally sure what you are describing there, but it sounds like you just need to add appropriate margin to each, such as a bit of right margin to each to keep them apart.
I am not sure how the inline block method would fix it?
I many ways, this is nicer than floats. A big advantage in this situation is that the boxes will be the same height even without a height set. This will stop the problems of some boxes snagging on taller ones above (and to the left) and thus not moving all the way left.
Yes, works in Safari. I was using Firefox. Despite many refreshes and cache clearings it’s still the same, but probably just a problem with my browser. Sorry about that.