-
1. Re: How do I display divs in airtight columns, like on Pinterest?
Nancy O. Feb 8, 2013 9:35 AM (in response to jyeager11)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.
Nancy O.
-
2. Re: How do I display divs in airtight columns, like on Pinterest?
jyeager11 Feb 8, 2013 11:00 AM (in response to Nancy O.)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 Feb 8, 2013 11:06 AM (in response to jyeager11) -
4. Re: How do I display divs in airtight columns, like on Pinterest?
Jon Fritz II Feb 8, 2013 11:08 AM (in response to jyeager11) -
5. Re: How do I display divs in airtight columns, like on Pinterest?
jyeager11 Feb 8, 2013 11:12 AM (in response to Jon Fritz II)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 Feb 8, 2013 11:23 AM (in response to jyeager11)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 Feb 8, 2013 11:39 AM (in response to Jon Fritz II)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. Feb 8, 2013 12:11 PM (in response to jyeager11)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 Feb 8, 2013 4:24 PM (in response to Nancy O.)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 Feb 8, 2013 4:29 PM (in response to Jon Fritz II)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.





