This is an example of a list-item, styles with css to hold two columns with several elements inside. The idea is to let the text column to the right of the image keep a straight left margin, and don`t let the text float under the image. All text elements are contained inside a span-tag, wich has is given the css property and value: "display: block", since it is an inline element. The css magic, however, lies in the css property "overflow: hidden" (overflow: auto will work as well).  The "overflow" -property gives the span-tag a strict rectangular shape, thus preventing it from floating around the image. When it comes to IE6 and IE7, it`s the "zoom: 1 " -property and value that does the magic that "overflow" does for all other modern browsers.

I have also used this method for styling search result pages, with great success. The amount of markup needed, really depends on how many html elements one has to deal with, but I feel that this combination of html and css generates less amount of markup.

Here`s the list:

• Star puppies2009.04.15, by: StignSuspendisse mattis nibh ac mi. In hac habitasse platea dictumst. Nam viverra, dui non sagittis molestie, nibh eros molestie magna, quis varius libero sem eget est. Aliquam sit amet urna id arcu gravida eleifend. Curabitur ligula. Donec dapibus, purus ut lacinia posuere, libero ligula gravida nisi, vel facilisis eros purus at dolor. Integer euismod ultrices magna. Aliquam auctor. Cras condimentum erat. Integer tempor lectus in turpis. Fusce elementum leo non sem commodo interdum. Sed iaculis placerat ante. Donec tellus metus, vulputate nec, dignissim vitae, rhoncus ac, mauris. Nulla dapibus sem ac mauris rhoncus placerat. Mauris congue metus sed diam. Vestibulum a risus ac lorem sollicitudin rhoncus. Praesent auctor porta tellus. Sed tincidunt vehicula ligula. Vestibulum sapien.
• Becker in rage2009.04.10, by: Stign Nam viverra, dui non sagittis molestie, nibh eros molestie magna, quis varius libero sem eget est. Aliquam sit amet urna id arcu gravida eleifend. Curabitur ligula.
• This one is angry to2009.04.07, by: StignNam viverra, dui non sagittis molestie, nibh eros molestie magna, quis varius libero sem eget est. Aliquam sit amet urna id arcu gravida eleifend. Curabitur ligula.Fusce elementum leo non sem commodo interdum. Sed iaculis placerat ante. Donec tellus metus, vulputate nec, dignissim vitae, rhoncus ac, mauris. Nulla dapibus sem ac mauris rhoncus placerat. Mauris congue metus sed diam. Vestibulum a risus ac lorem sollicitudin rhoncus. Praesent auctor porta tellus. Sed tincidunt vehicula ligula. In hac habitasse platea dictumst. Nam viverra, dui non sagittis molestie, nibh eros molestie magna, quis varius libero sem eget est. Aliquam sit amet urna id arcu gravida eleifend. Curabitur ligula. Donec dapibus, purus ut lacinia posuere, libero ligula gravida nisi, vel facilisis eros purus at dolor. Integer euismod ultrices magna. Aliquam auctor. Cras condimentum erat. Integer tempor lectus in turpis. Fusce elementum leo non sem commodo interdum. Sed iaculis placerat ante. Donec tellus metus, vulputate nec, dignissim vitae, rhoncus ac, mauris. Nulla dapibus sem ac mauris rhoncus placerat. Mauris congue metus sed diam. Vestibulum a risus ac lorem sollicitudin rhoncus. Praesent auctor porta tellus. Sed tincidunt vehicula ligula. Vestibulum sapien.
• This list element has no image2009.04.01, by: StignAliquam sit amet urna id arcu gravida eleifend. Curabitur ligula. Donec dapibus, purus ut lacinia posuere, libero ligula gravida nisi, vel facilisis eros purus at dolor. Integer euismod ultrices magna. Aliquam auctor. Cras condimentum erat. Integer tempor lectus in turpis. Fusce elementum leo non sem commodo interdum. Sed iaculis placerat ante. Donec tellus metus, vulputate nec, dignissim vitae, rhoncus ac, mauris. Nulla dapibus sem ac mauris rhoncus placerat. Mauris congue metus sed diam. Vestibulum a risus ac lorem sollicitudin rhoncus. Praesent auctor porta tellus. Sed tincidunt vehicula ligula. Vestibulum sapien.
• Another angry tennis player 2009.03.27, by: StignSuspendisse mattis nibh ac mi. In hac habitasse platea dictumst. Nam viverra, dui non sagittis molestie, nibh eros molestie magna, quis varius libero sem eget est. Aliquam sit amet urna id arcu gravida eleifend. Curabitur ligula. Donec dapibus, purus ut lacinia posuere, libero ligula gravida nisi, vel facilisis eros purus at dolor. Integer euismod ultrices magna. Aliquam auctor. Cras condimentum erat.
  Integer tempor lectus in turpis.
  Fusce elementum leo non sem commodo interdum. Sed iaculis placerat ante. Donec tellus metus, vulputate nec, dignissim vitae, rhoncus ac, mauris. Nulla dapibus sem ac mauris rhoncus placerat. Mauris congue metus sed diam. Vestibulum a risus ac lorem sollicitudin rhoncus. Praesent auctor porta tellus. Sed tincidunt vehicula ligula. Vestibulum sapien. In hac habitasse platea dictumst. Nam viverra, dui non sagittis molestie, nibh eros molestie magna, quis varius libero sem eget est. Aliquam sit amet urna id arcu gravida eleifend. Curabitur ligula. Donec dapibus, purus ut lacinia posuere, libero ligula gravida nisi, vel facilisis eros purus at dolor. Integer euismod ultrices magna. Aliquam auctor. Cras condimentum erat. Integer tempor lectus in turpis. Fusce elementum leo non sem commodo interdum. Sed iaculis placerat ante. Donec tellus metus, vulputate nec, dignissim vitae, rhoncus ac, mauris. Nulla dapibus sem ac mauris rhoncus placerat. Mauris congue metus sed diam. Vestibulum a risus ac lorem sollicitudin rhoncus. Praesent auctor porta tellus. Sed tincidunt vehicula ligula. Vestibulum sapien.

This is the css code:

.col-container {
	width: 90%;
	margin: 0;
	font: normal 1em/1.3 Arial, Helvetica, sans-serif;
}
.col-container * {
	margin: 0;
	padding: 0;
}
.col-container li {
	list-style-type:none;
	margin: 0 0 10px 0;
}
.col-container li span, .col-container li {
	display: block;
	overflow: hidden;
	zoom: 1;
}
.col-container li img {
	float: left;
	margin: 5px 10px 10px 0;
	padding: 1px;
	background: #111;
}
.col-container li span a {
	text-decoration: none;
	color: #333;
	border: none;
}
.col-container li span b {
	display: block;
	margin-bottom:3px;
}
.col-container li span date, .col-container li span author {
	font-style: italic;
	font-size: 90%;
}
.col-container li span b a {
	color: #A11B1B;
	font-size: 120%;
}

Leave a Reply