I am trying to create a three column layout for my website. When I use the column property and set it to "3" columns, it doesn't align correctly. Each column after the previous seems to be pushed down a little bit more. Is there a way to correct this? It does the same thing when I set the column count to "5" column and minimize the window
.widget-column {
columns: 5em 3;
/* Test with 5 columns */
-moz-columns: 5em 3;
/* Test with 5 columns */
-webkit-columns: 5em 3;
/* Test with 5 columns */
}
.widget-column p {
padding: 1em;
}
<div class="widget-column">
<p>Column</p>
<p>Column</p>
<p>Column</p>
<p>Column</p>
<p>Column</p>
</div>
JSFiddle
On the Home tab, click Paragraph, and then click Align. Select the Align with option and then select the paragraph tag pertaining to the column one paragraph. Click OK.
Set a to zero and b to the position of the column in the table, e.g. td:nth-child(2) { text-align: right; } to right-align the second column. If the table does use a colspan attribute, the effect can be achieved by combining adequate CSS attribute selectors like [colspan=n] , though this is not trivial.
Use width:100% on the table and the middle column. You could also set width:100% on the last column's style and td align="right" on the last column. Then you can insert more columns in the middle while the spacing still works.
Since <p>
is a block level element, it adds a newline both before and after the element. But, you can make it as inline-block level, by setting display:inline-block;
plus width:100%;
for expanding the width.
* {
margin: 0;
padding: 0;
}
.widget-column {
margin: 10px;
text-align: center;
columns: 5em 3;
-o-columns: 5em 3;
-ms-columns: 5em 3;
-moz-columns: 5em 3;
-webkit-columns: 5em 3;
column-gap: 0px;
-o-column-gap: 0px;
-ms-column-gap: 0px;
-moz-column-gap: 0px;
-webkit-column-gap: 0px;
}
.widget-column p {
background: #EEE;
padding: 1em;
display: inline-block;
width: 100%;
}
<div class="widget-column">
<p>Column</p>
<p>Column</p>
<p>Column</p>
<p>Column</p>
<p>Column</p>
</div>
You have to use <span> in case of <p> tag, <p> tag by default starts from next line
Here is the plnk:
http://plnkr.co/edit/n4TlD6nVSqOa9U5F2PON?p=preview
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With