Tuesday, 15 September 2015

Code - Multiple Columns

If you are only making columns within one post, you can do so manually using CSS within your post.
If you’re not familiar with CSS, you can read more about width, padding and float here. The way it displays may vary on your theme, so feel free to play around.
For two columns, you would do the following:

<div style="width:40%;padding:0 10pt 0 0;float:left;">
Column 1 info here
Column 1 info here
Column 1 info here
</div>

<div style="width:40%;padding:0 10pt 0 0;float:right;">
Column 2 info here
Column 2 info here
Column 2 info here
</div>

It will display like this:
Column 1 info here
Column 1 info here
Column 1 info here
Column 2 info here
Column 2 info here
Column 2 info here



For three columns, you would do the following:
<div style="width:30%;padding:0 10pt 0 0;float:left;">
Column 1 info here
Column 1 info here
Column 1 info here
</div>

<div style="width:30%;padding:0 10pt 0 0;float:left;">
Column 2 info here
Column 2 info here
Column 2 info here
</div>

<div style="width:30%;padding:0 10pt 0 0;float:right;">
Column 3 info here
Column 3 info here
Column 3 info here
</div>

No comments:

Post a Comment