RSS

Monthly Archives: August 2008

UL formatted to two or more columns

Very simple way to format UL or OL to two or more columns is to use float property.

Take this example – UL element with 8 LIs:

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
   <li>Item 5</li>
   <li>Item 6</li>
   <li>Item 7</li>
   <li>Item 8</li>
</ul>

This is how UL looks without float property.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8

To make the list look like we want it, we do the following:

<style>
   ul { width:400px; }
   li  { width:200px; float:left; }
</style>

And we get two column list like that:

If you want you can set width in percents. The number of columns depends on the width of the columns. For instance, to change the example above to 3 colums view, you would need to decrease the column size to 30%.

 
4 Comments

Posted by on August 16, 2008 in CSS, HTML

 

Tags: , ,

Editable table. Part 1

Part 1 of the Editable table thing is finished – pure HTML table with server-side handlers and full server-side validation, possibility to add, delete and edit records. Next step is to add extended functionality and interactivity with JavaScript.

 
Leave a comment

Posted by on August 1, 2008 in misc

 
 
%d bloggers like this: