Question

I have written the script for jQuery columnizer. Everything works okay with one noteworthy exception:

I am wanting to fix the number of columns to 3 AND increase the padding to 10px. As the layout stands now, I am not happy with how tight the columns sit after forming.

When I use CSS to adjust the padding, the last column gets pushed out and kicked down:

Code:

<script>
$(function(){
        $('#sectionID').columnize({ columns: 3 });
});
</script>
<style type="text/css">
.column{padding:10px; }
</style>

Any ideas or tips?

Thanks!

/Brian

Answer 1

the best way i’ve found to solve this problem is to add the padding to the elements inside the column instead. it’ll depend on the content you have. if you have just paragraphs inside the column, then changing the rule to .column p is enough.

The easiest solution would be to use a child selector and add the padding to the items inside the column with:

.column > * { padding: 10px }

That should work for 90% of people’s needs for column padding, but note since it’s added to children of the column it’ll be adding top/bottom padding to each element too instead of just to the column – which may not be desired.

Another option (which requires additional markup) is to add a div to the container that you’re columnizing, and then add the padding to that new div. So instead of:

<div id=sectionID>
... content to columnize ...
</div>

you’d have:

<div id=sectionID>
<div class=for_padding>
... content to columnize ...
</div>
</div>

and your CSS would be:

.column .for_padding { padding: 10px; }

You’d still columnize the sectionID div, and columnizer will add that <div class=for_padding> wrapping the inside of each column.