CODEWITHSUNDEEP
htmlcss
Adrian Godong
Adrian Godong

Reputation: 8921

Filling Two Columns Automatically

I'd like to create two column layout for my list using CSS.

Let's say I have 5 items, the presentation would be:

<item 1>  <item 4>
<item 2>  <item 5>
<item 3>

How can I do this with HTML and CSS? Keep in mind that the list length is variable.

I'll be generating the HTML server side using C#, that will provide more flexibility.

Upvotes: 1

Views: 422

Answers (1)

Adrian Godong
Adrian Godong

Reputation: 8921

I finally made up my mind and use two floated DIVs to achieve this layout.

The server side code will iterate the items and create a new DIV if it passes the halfway point (current index >= half of length).

The resulting HTML would look like the following:

<div class="container">
  <div class="column">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </div>
  <div class="column">
    <div>Item 4</div>
    <div>Item 5</div>
  </div>
  <div style="clear: both"></div>
</div>

CSS:

.column { float: left; }

The server side will determine when to close and create a new DIV. Not pretty, but it works.

Upvotes: 1

Related Questions