CODEWITHSUNDEEP
htmlcss
xylar
xylar

Reputation: 7663

Position of li elements in a 2 column list

I am trying to get a 2 column list so that it orders to orders the element left-to-right, top-to-bottom. I have the following HTML:

<ul>
    <li>
        <p>Title 1</p>
        <p>DD/MM/YY</p>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </li>
    <li>
        <p>Title 2</p>
        <p>DD/MM/YY</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </li>
    <li>
        <p>Title 3</p>
        <p>DD/MM/YY</p>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
    </li>
    <li>
        <p>Title 4</p>
        <p>DD/MM/YY</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </li>
</ul>

and CSS

ul {
  width: 300px;
}    

li {
  list-style: none;
  position: relative;
  width: 47%;
  padding: 0 5px 0 0;
  float: left;
}

The problem is "Title 3" is underneath "Title 2" whereas I would like it underneath "Title 1". The problem is because the height of Title 1 element pushes it to the right. The text is variable so I don't want to set a specific height.

I have created a JSFiddle to illustrate https://jsfiddle.net/wwzrbhno/

Upvotes: 0

Views: 97

Answers (2)

Ash
Ash

Reputation: 2108

You can try something like this:

ul { 
    width:300px;
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}

and this will probably allow you to do away with the CSS for the li.

This is a CSS3 feature however so limited browser support.

Upvotes: 0

Jan Jouke Tjalsma
Jan Jouke Tjalsma

Reputation: 610

You can use a combination of display:inline-block and vertical-align:top instead of the float.

ul {
  width: 300px;
}    

li {
  list-style: none;
  display: inline-block;
  width: 47%;
  padding: 0 5px 0 0;
  vertical-align:top;
}

See this fiddle: https://jsfiddle.net/wwzrbhno/4/

Upvotes: 3

Related Questions