Span list columns

I need columns but I don’t want tables
What I need is some lay out that looks like tables. Looks like a news paper. Stays where you put it. Aligns text to the top. Fits in all view-ports and generally plays well with others.

I also don’t want complex CSS. I hate complicated. I just want to have fun. HTML is just a necessary chore so I can bang the keyboard and the words go on the screen.

Here’s the simplest code I’ve come up with so far. Thanks to all who added bits and pieces and posted on the web.


div.content {
border:1px solid #000;
}
span {
display:inline;
vertical-align:top;
width:99%;
overflow:auto;
}
div.clear {
height:3px;
width:95%;
clear: both;
background:red;
margin:1%;
}
ul.span {
display: inline-block;
background:yellow;
border:2px solid red;
height:100%;
vertical-align:top;
padding:1%;
margin:1%;
width:20%;
}
ul.span li {
decoration:none;
}

Have I tested it on all browsers? Nope, but it’s a start. Copy it and monkey with it…

Leave a Reply

Your email address will not be published. Required fields are marked *