TIP: Columns with lists

Having a layout with 2 columns is a common request for biographies, yearly data, and so on. Building such a layout out of lists is a good alternative to building it from tables or nested divs.

Example: 2 columns of text with lists

Firefox, Mozilla and Netscape
Firefox The better way to surf the net!
Css-Intensivstation
CSS-INTENSIVSTATION has the solution for your CSS template needs.
XHTML and CSS
Valid markup is the foundation of working web design.

Example: 2 columns of images and text with lists

CSS-INTENSIVSTATION has the solution for your CSS template needs.
Valid markup is the foundation of working web design.
Download 2 column template

HTML Code for lists

<ul>
   <li class="innen">Css-Intensivstation</li>
   <li class="aussen">CSS2 Templates</li>
   <li class="clr"><br class="clr" /></li>
</ul>

CSS for lists with two columns

These details are valid for all browsers.

ul.colums-two {
   list-style-type: none;
   padding: 0;
   margin: 0; }

li.innen {
   float: left;
   width: 150px;
   font-weight: bold;
   margin: 0 20px 10px 0; }
      
li.aussen {
   float: left;
   width: 300px; 
   padding: 0;
   margin: 0 0 10px 0;}

There is some difference between browsers when it comes to clearing.

Firefox, Opera and al Mac browsers can have the clearing CSS class "clr" directly on the <li> and treat it like an empty element. <li class="clr" />
IE unfortunately cannot deal with this and doubles the space between elements.

li.clr {
   clear: left;
   width: 1px;
   height: 1px; 
   margin: 0;}

IE workaround

This cross-browser variant works on all browsers, is completely dynamic and can be implemented into any layout.
<li class="clr"><br class="clr" /></li>
<li> with the class "clr" is set to display:inline to ensure that IE treats the spacing correctly. Clearing is attached to <br />.

li.clr {
   display: inline;
   margin: 0;
   padding: 0;
   width: 1px;
 }

br.clr {
   clear: left;
   width: 1px;
   font-size:1px;
   margin: 0;
   padding: 0;
   overflow:hidden;
 }