Need help with float on responsive site

HTML & CSS
1

Hello,

I have one final bug which I am not sure about, any help would be appreciated :slight_smile:

http://mgdesign.hostultra.com/

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.

Here is the css for the 3 blocks


   .block
  {
	  width:275px;													
	  margin-bottom:80px;
	  height:600px;
	  float:left;
	  height:600px;
  }
	
	
   .block2
  {
	  width:275px;													
	  margin-bottom:80px;
	  float:right;
	  height:600px;
	  clear:right;
  }
		
	

   .block2a
  {
	  width:275px;													
	  margin-bottom:80px;
	  float:left;
	  height:600px;
  }
2

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.

3

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?

4

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.

5

Thanks, something I need to consider perhaps.

I have it sorted now, opted for a new block class in the end, floated it right and discovered a margin-right % which was causing the problem.

cheers for replying though :slight_smile:

6

OK, glad you found a solution, although as I test the page now, it doesn’t seem to perform properly when I narrow the browser window.

7

What browser are you using?

Works for me in safari. Can you refresh please? :slight_smile:

8

Works OK to me.

9

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.

10

It’s fine in Chromium, but I’m also seeing a problem in Firefox 7.