Css Columns On Ul Vs Div

Why is the output for

• Item
• Item
• Item
• Item

Solution 1:

Elements have default styles, browsers apply those default styles if you don't specifically define them.

It's a good practice to use a CSS reset on your projects and then define the styles the way you need them.

Here is a good source for a start: http://meyerweb.com/eric/tools/css/reset/

For example in your case FireFox renders a 16px top and bottom margin for the UL element (default box model).

Solution 2:

Add margin:0 to ul

.tcol
{
  -moz-column-count: 3;
  -moz-column-gap: 20px;
  -webkit-column-count: 3;
  -webkit-column-gap: 20px;
  column-count: 3;
  column-gap: 20px;
}
ul{
    margin:0
}

DEMO

Solution 3:

Due to the browser splitting the <li> into columns, the list-style-type has been pushed out of the normal view. You can correct this by adding list-style-position: inside; property to your tcol class.

There is also a very visible difference between the two layouts, not counting the missing list-style-type. Using the Elements panel in Chrome and hovering each <ul> and <li> you can see how the browser is laying out the column content.

The second version of your markup seems to be more "correct", with the container correctly encompassing the list-items.

Share