Thread: Floating divs

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

    Join Date
    Dec 2005
    Location
    Vancouver, WA, USA
    Posts
    397
    Rep Power
    189

    Floating divs


    Originally I was using tables, but that isn't responsive to the width of the browser window.

    So, now I have several DIVs (the number will vary) and I am lining them up. They are inside a container div.

    So far I've got a row of divs, the last one visible is partly cut off.

    I would like it to auto-wrap after however many 220px wide divs I can fit in a row.

    Recommendations for this noob?
    Thomas Tremain
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    76
    This is what a table is used for, what did you use to try to make your old table responsive? Usually % are used instead of px for responsive design and em is used instead of px, %, or pt for font size in responsive design



    About your problem can you post the code you are using so I can see what's going on?
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2005
    Location
    Vancouver, WA, USA
    Posts
    397
    Rep Power
    189
    The responsiveness I want is to display however many tiles (divs) on a row that will fit, then drop to the next row.

    I am close now.. It works, except every few rows or so, I get just one (or just a few) tiles on the left, and nothing to the right...

    Code:
    #morph_container {
    	display:inline;
    	width:80%;
    }
    div .tiles{
    	float:left;
    	width:220;
    	margin:15px;
    }
    .tiles .center {
    	text-align:center;
    }
    Code:
    <div id='morph_container'>
      <div class='tiles'><br><br>
        <span class='center'>
          <a href='#'>
           <img src='/image121t.jpg'>
          </a>
        </span>
        <br>
        <span class='center'>
          <h3><a href='#'>Some Text</a></h3>
        </span>
      </div>
    
      <div class='tiles'><br><br>
        <span class='center'>
          <a href='#'>
           <img src='/image80t.jpg'>
          </a>
        </span>
        <br>
        <span class='center'>
          <h3><a href='#'>Some Text</a></h3>
        </span>
      </div>
    
      <div class='tiles'><br><br>
        <span class='center'>
          <a href='#'>
           <img src='/image186t.jpg'>
          </a>
        </span>
        <br>
        <span class='center'>
          <h3><a href='#'>Some Text</a></h3>
        </span>
      </div>
    .
    .
    .
    </div>
    Thomas Tremain
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    76
    I repeated the tiles until there was 24 displayed 3 at a time for a total of 8 rows

    It works perfectly in google chrome and safari, what browser are you using?

    Code:
    <html>
      <head>
        <style type="text/css">
          #morph_container {
    	display:inline;
    	width:80%;
          }
          div .tiles{
    	float:left;
    	width:220;
    	margin:15px;
          }
          .tiles .center {
    	text-align:center;
          }
        </style>
      </head>
      <body>
        <div id='morph_container'>
          <div class='tiles'><br><br>
            <span class='center'>
              <a href='#'>
                <img src='/image121t.jpg'>
              </a>
            </span>
            <br>
            <span class='center'>
              <h3><a href='#'>Some Text</a></h3>
            </span>
          </div>
    
          <div class='tiles'><br><br>
            <span class='center'>
              <a href='#'>
                <img src='/image121t.jpg'>
              </a>
            </span>
            <br>
            <span class='center'>
              <h3><a href='#'>Some Text</a></h3>
            </span>
          </div>
    
          <div class='tiles'><br><br>
            <span class='center'>
              <a href='#'>
                <img src='/image121t.jpg'>
              </a>
            </span>
            <br>
            <span class='center'>
              <h3><a href='#'>Some Text</a></h3>
            </span>
          </div>
        </div>
      </body>
    </html>
    you can view it live here
    Last edited by jack13580; April 6th, 2013 at 07:15 PM.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2005
    Location
    Vancouver, WA, USA
    Posts
    397
    Rep Power
    189
    Originally Posted by jack13580
    I repeated the tiles until there was 24 displayed 3 at a time for a total of 8 rows

    It works perfectly in google chrome and safari, what browser are you using?

    you can view it live here
    Interesting. Mine must be getting influenced by inheritance.

    Here is an HTML version of the page: <link removed>

    I see the problem in firefox, and IE
    Last edited by ttremain; April 6th, 2013 at 10:10 PM.
    Thomas Tremain
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    76
    It's because of the different sizes of the images, in the link I posted all of the 404 not found images are the same size so it works perfectly like it should

    Comments on this post

    • ttremain agrees : Thanks!
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2005
    Location
    Vancouver, WA, USA
    Posts
    397
    Rep Power
    189
    Originally Posted by jack13580
    It's because of the different sizes of the images, in the link I posted all of the 404 not found images are the same size so it works perfectly like it should
    Well, that explains a lot... It is good to know I was at least on the right track.

    I will probably put a set dimension div around each thumbnail until I have a chance to get them all uniform.
    Thomas Tremain
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2005
    Location
    Vancouver, WA, USA
    Posts
    397
    Rep Power
    189
    Thank you again!

    Same page, related issue... (HTML sample: Here )

    I could use some advice on how to make the tiles center within the outer div. Please.

    (Can best be seen, when changing browser widths)
    Thomas Tremain
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    867
    Rep Power
    275
    you need to fix your closing </tr> and </td> 's for your "tiles"...you have them in wrong order. [should be </td></tr> ]. (I'm not sure why you changed to TABLEs for this section when DIVs would work for you)
    Also, your width property is missing its "unit" modifier [px, em, %]. Since you are wanting it adjust with browser width, I would suggest not using "px", but, do use one of the others. This will need some tweaking to get things to continue lining up for you, but, should help some with the centering [to a point].
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2005
    Location
    Vancouver, WA, USA
    Posts
    397
    Rep Power
    189
    Whoops on mixing the /td and /tr, I was in a hurry when I added that... And it was only temporary while I figured out how to get the div to actually set a width.

    I will look at this in a bit, as I need to run out to run a couple of errands. Thanks.
    Thomas Tremain
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    76
    the images are still random sizes, if you view your site on a mobile browser you will see how messed up it is

    whats the point of this?
    Code:
    #content img {
    margin: 0;
    height: auto;
    max-width: 100%;
    }
  22. #12
  23. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2005
    Location
    Vancouver, WA, USA
    Posts
    397
    Rep Power
    189
    Originally Posted by jack13580
    the images are still random sizes, if you view your site on a mobile browser you will see how messed up it is

    whats the point of this?
    Code:
    #content img {
    margin: 0;
    height: auto;
    max-width: 100%;
    }
    That is not something I noticed, it is just part of the wordpress theme itself. I am not familiar with those settings, would they be causing trouble? I can disable them in the current page using firebug, and they don't seem to affect the centering or alignment at all. On my phone, they are all just stacked on top of each other.. They are too wide to go side by side.

    I should also add, I was able to remove the tables completely, and still keep my "tiles" sized. This seems to have fixed the weird layout due to different sizes of images, even when I throw in somewhat longer text.

    But I am still trying to get the entire grid centered on the background.
    Last edited by ttremain; April 8th, 2013 at 04:27 PM.
    Thomas Tremain
  24. #13
  25. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2005
    Location
    Vancouver, WA, USA
    Posts
    397
    Rep Power
    189
    I'm pretty sure I cannot center the tiles, because I have to use a float:left to line them up. I don't know any other way.

    Sample page still: here

    I guess since it's a new issue, I should make it a new thread. Maybe I will if I don't get this figured out before hand.
    Last edited by ttremain; April 9th, 2013 at 02:53 AM.
    Thomas Tremain
  26. #14
  27. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    76
    I once had this problem before when trying to center a website I made in the center of the page but no matter what I did it wouldn't center even though I was doing it correctly

    I was eventually able to fix this by adding another wrapper around the one I already had so it my site got double layered with 2 wrapper type divs and doing this worked

    Go to http://troop557.vacau.com to see how it works

IMN logo majestic logo threadwatch logo seochat tools logo