10 Replies Latest reply: Feb 8, 2013 4:29 PM by jyeager11 RSS

    How do I display divs in airtight columns, like on Pinterest?

    jyeager11 Community Member

      What's the best way to display several DIVs with identical widths but varying heights, filling up column space fluidly like what you see on Pinterest (see example).


      Just placing the divs in an HTML page results in the baseline factor keeping the next DIV from snuggling up to the DIV above it.

       

      I'm not sure if I need to be using table cells for this, or if there's a display: property that fixes the baseline alignment problem.

        • 1. Re: How do I display divs in airtight columns, like on Pinterest?
          Nancy O. CommunityMVP

          By default, browsers add margins & padding to all HTML elements.  You can zero them out individually in your CSS or use a global CSS reset method.

          http://cssresetr.com/

           

           

           

          Nancy O.

          • 2. Re: How do I display divs in airtight columns, like on Pinterest?
            jyeager11 Community Member

            Sorry, this isn't a padding issue. It's an alignment issue. I've already got margin:0 and padding:0 applied to most elements by default.

             

            I want to do columns like Pinterest does in the example I linked to, where divs of varying heights but identical widths are all stacked on top of one another, where none of them has any relationship with the div on the left or right of it... only the div above or under it.

             

            The answer to this question could be extremely simple or very complex, as I've never really seen this anywhere but on Pinterest.

            • 3. Re: How do I display divs in airtight columns, like on Pinterest?
              jyeager11 Community Member

              What displaying divs stacked next to one another inline does :

              temp.png

               

              What I would PREFER it do :
              temp2.png

               

              Now, if this was 10 years ago, I'd just create a table with X columns and individually place my divs in each column.

               

              In 2013, is there a better way of stacking these up this way?

              • 4. Re: How do I display divs in airtight columns, like on Pinterest?
                Jon Fritz II CommunityMVP

                The answer is in the css of the pinterest page.

                 

                They combine absolute positioning, fixed pixel distances from the parent element for each, fixed pixel dimensions for width and a padding of 15 pixels around each element.

                 

                Use Firefox to Inspect Element and you'll see what they did for each item...

                 

                pin.jpg

                • 5. Re: How do I display divs in airtight columns, like on Pinterest?
                  jyeager11 Community Member

                  Thanks Jon. I have to run a few errands so I'll look at this more closely when I get back, but off the cuff, I noticed data-height being specified... I can't imagine that this is necessary to make this work.

                   

                  This will work even if I don't know how tall my divs will be, right?

                   

                  And is there a better way to reach the finish line than how Pinterest does it, or are they doing it the most efficient way available?

                  • 6. Re: How do I display divs in airtight columns, like on Pinterest?
                    Jon Fritz II CommunityMVP

                    I wouldn't do it like Pinterest.

                     

                    I would have 3-4 left floated divs acting as columns within a wrapper tag set to be centered and having a width enough to hold them all side by side. Then I would stack divs inside each column and add a clear:both to force them to the next line and add padding.

                     

                    Here's a simplified version of what I'm thinking...

                     

                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                    <html xmlns="http://www.w3.org/1999/xhtml">

                    <head>

                    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

                    <title>Untitled Document</title>

                    <style type="text/css">

                    .column {

                        float:left;

                        border:1px solid black;

                        width:300px;

                    }

                    .content {

                        width:270px;

                        padding:15px;

                        clear:both;

                        border:1px solid orange;

                    }

                    #wrapper {

                        width:912px;

                        margin:auto;

                    }

                    </style>

                    </head>

                     

                    <body>

                    <div id="wrapper">

                    <div class="column">

                        <div class="content">ewfjs lkjshdfkjdshf kjhdsf</div>

                        <div class="content">

                          <p>sdf sdlkfj sldkjfsdlk jf</p>

                          <p>asdf</p>

                          <p>asdfasdf sfdsaf sda</p>

                        </div>

                        <div class="content">

                          <p>sldkf ;sldkf s;dlkf ;sd</p>

                          <p>a sd</p>

                          <p>fsda </p>

                        </div>

                    </div>

                    <div class="column">

                        <div class="content">

                          <p>sdfgsdfgsdf sd fgdf sasf d</p>

                          <p>s </p>

                          <p>sd</p>

                          <p> af</p>

                        </div>

                        <div class="content">dsf rwthrttr hrt  hf </div>

                        <div class="content">

                          <p>tr hrtdh dfghdfht dasd fsadf </p>

                          <p>asdf </p>

                          <p>dsa</p>

                          <p> asd</p>

                        </div>

                    </div>

                    <div class="column">

                        <div class="content">tr hr h dhtrh dtrh </div>

                        <div class="content">

                          <p>r thdrh rtdh drth dth asd fa</p>

                          <p>sd ffa</p>

                          <p>ds</p>

                          <p> safd</p>

                        </div>

                        <div class="content">

                          <p>d rthdtr tdhr hdr hdrh ra sd</p>

                          <p> asdf</p>

                          <p>afds </p>

                        </div>

                    </div>

                    </div>

                    </body>

                    </html>

                    • 7. Re: How do I display divs in airtight columns, like on Pinterest?
                      jyeager11 Community Member

                      Interesting method. The only downside I see is that if you put 5 elements in each column, and it turns out one column had all the "shortest" elements, then you'd have some columns be twice as long as the one next to it.

                       

                      Remember, the widths are constant/static, but the heights are dynamic.

                      • 8. Re: How do I display divs in airtight columns, like on Pinterest?
                        Nancy O. CommunityMVP

                        For equal height columns, use display:table.

                         

                        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                        <html xmlns="http://www.w3.org/1999/xhtml">

                        <head>

                        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

                        <title>Untitled Document</title>

                        <style type="text/css">

                         

                        #wrapper {

                        display:table;

                        width: 970px;

                        margin: auto;

                        }

                         

                        .column {

                        display:table-row;

                        width: 30%;

                        }

                         

                        .content {

                        display:table-cell;

                        padding: 0 15px;

                        border: 1px solid orange;

                        }

                         

                        </style>

                        </head>

                         

                        <body>

                        <div id="wrapper">

                        <div class="column">

                        <div class="content">ewfjs lkjshdfkjdshf kjhdsf</div>

                        <div class="content"> <p>sdf sdlkfj sldkjfsdlk jf</p> <p>asdf</p> <p>asdfasdf sfdsaf sda</p> </div>

                        <div class="content"> <p>sldkf ;sldkf s;dlkf ;sd</p> <p>a sd</p> <p>fsda </p> </div>

                        </div>

                         

                        <div class="column">

                        <div class="content"> <p>sdfgsdfgsdf sd fgdf sasf d</p> <p>s </p> <p>sd</p> <p> af</p> </div>

                        <div class="content">dsf rwthrttr hrt  hf </div>

                        <div class="content"> <p>tr hrtdh dfghdfht dasd fsadf </p> <p>asdf </p> <p>dsa</p> <p> asd</p> </div>

                        </div>

                         

                        <div class="column">

                        <div class="content">tr hr h dhtrh dtrh </div>

                        <div class="content"> <p>r thdrh rtdh drth dth asd fa</p> <p>sd ffa</p> <p>ds</p> <p> safd</p> </div>

                        <div class="content"> <p>d rthdtr tdhr hdr hdrh ra sd</p> <p> asdf</p> <p>afds </p> </div>

                        </div>

                        </div>

                        </body>

                        </html>

                         

                         

                        Nancy O.

                        • 9. Re: How do I display divs in airtight columns, like on Pinterest?
                          jyeager11 Community Member

                          That's not what I'm looking for. Look at the Pinterest link I am re-pasting : CLICK HERE

                           

                          There are columns, but no no rows. Nothing is horizontally aligned. I don't need it to be horizontally aligned.

                           

                          That being said, each column has a different number of items in it. The first two columns have 8 items, but the third has 7 (likely because it contains one item that is nearly as long as two).

                           

                          So I am assuming it somehow KNOWS when it should stop filling that column and put the next item in the NEXT column.

                           

                          At the very end of the page, each column ends in a different spot... but they're all still relatively close to one another where you don't have 500 pixels of nothing in one column while the next one has content.

                           

                          That's what I'm trying to do. Columns, no rows, and each column ending APPROXIMATELY/ROUGHLY at the same place.

                          • 10. Re: How do I display divs in airtight columns, like on Pinterest?
                            jyeager11 Community Member

                            Now this, on the other hand, is much closer to what I'm trying to do.

                             

                            I tried your code out, Jon, and like I said, my only concern is what happens when the first column has 3 long items and the 2nd one gets stuck with 3 short items? There would be a gigantic white space in the middle, after those 3 items.

                             

                            As mentioned in my reply to Nancy, if you click the link to the Pinterest page, you'll see the first two columns have 8 items but the 3rd one only has 7. Because it was saddled with an extra tall item that's worth 2. If it had 8 items like the first two columns, then it would end up being WAY longer than all the other columns.

                             

                            Somehow, it's able to *know* not to add an 8th item there, and "word-wraps" (for lack of a better term) the 8th item to the 4th column.