Columns property not aligning correctly

Question

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

possible duplicate of [How to prevent column break within an element?](http://stackoverflow.com/questions/7785374/how-to-prevent-column-break-within-an-element) — sergdenisov, Jul 01 '15 at 20:48

score 2 · Answer 1 · answered Jul 01 '15 at 19:05

2

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

answered Jul 01 '15 at 19:05

Himanshu gupta

650
5
10

score 2 · Accepted Answer · edited Jan 04 '16 at 17:21

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>

Columns property not aligning correctly

2 Answers2