#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2010
    Posts
    195
    Rep Power
    45

    Confused by tile layout with floats. So close, yet so far...


    Good morning. Our designers have come up with a tile layout for a page we are working on. As the web guy, I'm tasked with making it functional. I'm having a hard time wrapping my brain around all the floats involved, and I've gotten all but one tile into place. But for the life of me, I can't figure out how to get it where it needs to be, so I thought I'd come here for a fresh pair of eyes.

    http://jsfiddle.net/jTvWQ/

    div5 (red) is the offender. I have tucked it down at the bottom for now, since it was messing up the rest of the layout. It goes in the empty white space to the right of the orange div6, and under the teal div4.

    I can make it work if I swap div4 & div5 with div6, as shown here: http://jsfiddle.net/8b6Jx/, but any of you who have worked with designers before know that they are pressuring me to stick to their original design.

    Thoughts?
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    32
    What about having two containing divs for the left and right of the block of tiles, which would then make it much easier to position / float each box within each of the containing divs (sort of like 2 columns)?
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2010
    Posts
    195
    Rep Power
    45
    Ah, of course. I've done this very thing lots with regular layouts, but this is my first tile layout, and I just never thought to apply this.

    I'll give that a try here.
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    32
    Of course that wouldn't work if you didn't have that type of tile layout So maybe another option is to position each tile relatively (just throwing another thought into the pot).
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4304
    Originally Posted by simplypixie
    Of course that wouldn't work if you didn't have that type of tile layout So maybe another option is to position each tile relatively (just throwing another thought into the pot).
    Adding an additional <div> as a wrapper around div4 and div5 is a much more robust solution. Relative positioning is really only good for making small adjustments in position (or sometimes to swap the position of two columns).
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  10. #6
  11. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    32
    Originally Posted by Kravvitz
    Adding an additional <div> as a wrapper around div4 and div5 is a much more robust solution. Relative positioning is really only good for making small adjustments in position (or sometimes to swap the position of two columns).
    Totally agree - I very rarely use relative positioning for anything to be honest
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2010
    Posts
    195
    Rep Power
    45
    Originally Posted by Kravvitz
    Adding an additional <div> as a wrapper around div4 and div5 is a much more robust solution. Relative positioning is really only good for making small adjustments in position (or sometimes to swap the position of two columns).
    Ah, your comment is a good tip as well. This particular design allowed me to break the layout into two columns, so that's what I did based on the suggestion above. But your suggestion of simply adding a wrapper div around the two offending divs would have worked brilliantly as well, especially if my layout did not permit such a clean column split down the middle.

    I wanted to make sure I highlighted and affirmed your response for others who may stumble upon this thread. Thanks!

IMN logo majestic logo threadwatch logo seochat tools logo