CODEWITHSUNDEEP
htmlcss
Gasim
Gasim

Reputation: 8001

create a 2 column list

I am trying to create an unordered list with two columns. I have googled a lot and found ways to do it with list items. This works when the text is short but when there is long texts (more than one paragraph), the list creates 3 rows and 1 right and one left column each (http://jsfiddle.net/MKTt6/)

#faq article li {
    width: 50%;
    float: left;
    font-weight: 600;
    margin-top: 20px;
}

Upvotes: 0

Views: 95

Answers (3)

Michael
Michael

Reputation: 1231

Is this what you are looking for? http://jsfiddle.net/sdyjD/1/

I'm not sure if i would use ul for this. I would personally go for divs only.

html:

<ul>
    <li>
        <div>
          Txt
        </div>
    </li>
    <li>
        <div>
          Txt
        </div>
    </li>
..... etc
</ul>

I use the inner divs for padding.

Css:

ul li {
    float: left;
    width: 50%;
    list-style:none;
}

ul li div {
    padding: 10px;
}

Upvotes: 0

Adam Simpson
Adam Simpson

Reputation: 3681

Don't use floats for this. Instead use display:inline-block

#faq article li {
    width: 50%;
    display:inline-block;
    margin-right:-4px;
    font-weight: 600;
    margin-top: 20px;
}

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 106078

You can clear left one of them out of two: 

li:nth-child(odd) {clear:left;}

Upvotes: 0

Related Questions