SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict Zapppa's Avatar
    Join Date
    Aug 2009
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help with float on responsive site

    Hello,

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

    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


    Code CSS:
       .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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    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. #3
    SitePoint Addict Zapppa's Avatar
    Join Date
    Aug 2009
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by Zapppa View Post
    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.
    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. #5
    SitePoint Addict Zapppa's Avatar
    Join Date
    Aug 2009
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    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. #7
    SitePoint Addict Zapppa's Avatar
    Join Date
    Aug 2009
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What browser are you using?

    Works for me in safari. Can you refresh please?

  8. #8
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works OK to me.
    Play the greatest free online games in the world

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    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. #10
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    5,345
    Mentioned
    214 Post(s)
    Tagged
    5 Thread(s)
    It's fine in Chromium, but I'm also seeing a problem in Firefox 7.
    Attachment 57924


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •