Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Columns property not aligning correctly

Tags:

html

css

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

like image 715
Jbro Avatar asked Jul 01 '15 18:07

Jbro


People also ask

How do you align columns?

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.

How do you align columns in HTML?

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.

How do I align columns to the right?

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.


2 Answers

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>
like image 169
Derek Avatar answered Sep 30 '22 14:09

Derek


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

like image 40
Himanshu gupta Avatar answered Sep 30 '22 15:09

Himanshu gupta