Liquid + Fixed Two Column Lists with CSS

Liquid + Fixed Two Column Lists with CSS

October 20th, 2008

Ever tried creating a two column liquid llist with one of the columns being a fixed width? Usually creating table-like layouts in CSS can be a pain, but this quick tutorial will fix this common issue.

Common Mistakes and How to Correct Them

Typically most people will run into two annoying CSS issues.

1. Bug Example #1
   The second column spills underneath the first column. View example
2. Bug Example #2
   Both columns do not line up properly. View example

The Correct Method
XHTML & CSS

XHTML
I usually start off creating the rows using a list, then break the columns into its own divs.
The first div will be the fixed column, which in my example will contain the image and the image description. The second div will be the part that is liquid, allowing the content to be flexible according to the browser size.

<ul class="column">
	<li>
		<div class="imgblock">
			<img src="http://l.yimg.com/a/i/us/autos/autos_mb_concept_139x119.jpg" alt="" />
			<strong>Image Name</strong>
		</div>
		<div class="detail">
			<h2>Title</h2>
			<p>Caecus damnum commoveo abbas nunc sed multo neque eum. Ut qui mauris refero te nobis ullamcorper dolus, duis, adsum, odio. Loquor at loquor quis occuro valde facilisis dignissim plaga, molior interdico. Eros tego, verto ibidem tego, huic usitas adsum. Ullamcorper in vulpes, obruo dolore enim os quod. Velit abluo tation tum scisco, nullus odio ut quadrum luctus tum. </p>
		</div>
	</li>
</ul>

CSS
Ill start by styling the main list that will be spitting out each row.

Main list CSS

ul.column{
	font-size: 1.2em;
	margin: 10px 0;
	padding: 0;
	list-style: none;
	float: left;
	width: 100%;
	border-top: 1px solid #ddd;
}
ul.column li {
	float: left;
	background: #f0f0f0;
	width: 100%;
	padding: 10px 0;
	margin: 0;
	border-bottom: 1px solid #ddd;
}

Fixed Column CSS

ul.column li .imgblock {
	font-weight: bold;
	float: left;
	width: 150px;
	padding: 0 10px;
	text-align: center;
}
ul.column li .imgblock img {
	padding: 5px;
	margin-bottom: 5px;
	background: #fff;
	border: 1px solid #ccc;
}

Liquid Column CSS (Notice I do not add a float left, nor do I specify a width size to this column).

ul.column li .detail{
	padding-left: 170px;
}

Additional Touch-ups

Now let’s dress up the elements inside of these columns

Heading and Paragraphs CSS

ul.column li h2, ul.column li p {margin: 5px 0; padding: 5px 0;}

Bullet List
Incase you would like a bullet list in your detail section.

ul.column li ul.specs li {
	float: none;
	margin: 0 5px 0 20px;
	padding: 0;
	list-style: disc;
	border: 0;
	background: none;
	width: auto;
}

Finally, let’s add a class to every other list item for better legibility.

ul.column li.even { background: #fff; }

If you have a different solution or have any comments or questions, don’t be afraid to let me know!

Tags: Column Layouts, CSS Bugs, Tutorial

This entry was posted on Monday, October 20th, 2008 at 4:16 pm and is filed under CSS/XHTML. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.