CODEWITHSUNDEEP
htmlcss
gxthegreat
gxthegreat

Reputation: 77

1st column in html source displays 1 row below the other columns

I am having a standard html source and have a text with regular <ol> list in it that I want to be displayed on the page in 2, 3 or 4 columns for example (no table to be used). When I say in CSS what i want to happen, the text goes into several columns but the 1st column starts 1 row lower than the others. How can I make all columns to be displays on the same starting level? This is the HTML part:

<div id="references">   
    <ol>
        <li>Some text</li>
        <li>Some other text</li>
        <li>And again some text</li>
    </ol>
</div>

This is the CSS part witch is simply copied from the documentation in http://www.w3schools.com/cssref/css3_pr_column-width.asp:

#references {
    -webkit-column-width: 30em; /* Chrome, Safari, Opera */
    -moz-column-width: 30em; /* Firefox */
    column-width: 30em;
}

Upvotes: 1

Views: 796

Answers (4)

mika
mika

Reputation: 31

I think column width is toooooooooo long.. try to reduce that. like under.

-webkit-column-width: 15em; /* Chrome, Safari, Opera */
-moz-column-width: 30px; /* Firefox */
column-width: 30px;

Upvotes: 0

Luca Putzu
Luca Putzu

Reputation: 1456

You should force the margin-top of the <ol> to 0px;

#references ol {
    margin-top: 0px;
}

see the jsfiddle link

Upvotes: 0

user1882585
user1882585

Reputation: 321

This is because the ol has a margin. You can remove it so all list elements are aligned.

ol {
    margin-top: 0px;
}

http://jsfiddle.net/ous9y59w/

Upvotes: 3

Rishabh Shah
Rishabh Shah

Reputation: 679

Add the following CSS:

#references ol{
   margin: 0;
}

Upvotes: 2

Related Questions