Liquid + Fixed Two Column Lists with CSS
Blog » CSS/XHTML » Liquid + Fixed Two Column Lists with CSSLiquid + 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.
- Bug Example #1
The second column spills underneath the first column. View example - 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!
Subscribe via RSS ,by email, or by twitter to get all upcoming
tutorials and articles delivered straight to you.
Bookmark or Share this Post!
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.
Popular Posts
Recent Comments
Thanx for the tutorial, helped me out!
I struggled with exactly the same problem some time ago, trying to style comments for a Dotclear theme, and I’m glad to see I came up with what you think is the “correct method”. To me Problem #2 was the most annoying because it showed up in Firefox when it was solved in IE6, and vice-versa.
Nice fix for the columns. I agree with Mitternacht that #2 issue is one stupid bug!! Thanks for the article.
[...] 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. View source [...]
Haha`You are really great,thanks a lot!
As a newbie I can make sense of that, however if I wanted to place the image in the css code how would I do that? And then center it all?
bj, placing an image in the css code, do you mean like a background image in the css? and when you say center, do you mean horizontally center aligning inside of the columns? Just want to make sure I’m not misunderstanding your question~
Let me know~
Soh, yes place the image as background in the css. And for center…. make 2 even colomns that center on the page. Thanks
Hey bj,
You can do the following to get your background Images on the columns:
ul.column li .imgblock { font-weight: bold; float: left; width: 150px; padding: 0 10px; text-align: center; background: url(image.jpg) no-repeat left top; } ul.column li .detail{ padding-left: 170px; background: url(image.jpg) no-repeat 170px top; }You may have to adjust the padding or background positioning depending on what you are trying to achieve with your image~
and to center align these columns as a whole, you can wrap it in a div and specify a width, then add a margin: 0 auto; and that should do the trick
Finally someone with a good tutorial on how to make this all work!!
Thanks
i have two column and i want to add them .for example
2 + 4 = 6
4 +8 =12
onhere,2 is firscolum and 4,8 is second column,result is third column .i awant to add all column like this by one formula how ?
hmm
when i use a different size dimension image, it overlaps the paragraph. When i use a smaller image, the image name goes to the right of the image. When i have a long paragraph, it wraps under the image…
changing the width in the imageblock, the long paragraph still goes under the image.
am i doing something wrong? i just cut and paste the final demo and alter images and descriptions..
@binita, Im not sure if I understand your question, can you please rephrase it or give me an example?
@marc, if you used the example on the demo page, and used a different size images, are you sure you adjusted the width in the CSS? If you have a sample, I can take a look~
soh,
i think the prob is that the dynamic images are not a fix size. So any image larger than what is specify in the CSS will overlap the descriptions. Any image smaller then the CSS will cause the “name of image” to float to the right.. I just simply added a BR after the image, however being dynamic I can’t do much about larger image. So it all works fine if all images are fixed sizes - which im forcing it now to have the same width.
How about you wrap your image with a div that has an overflow hidden or has a fixed/max-width of the dynamic image, this is not the prettiest solution but it will keep the images from flowing overboard into the content~
And about the “image name” being shoved to the right, you can just specify a display:block on the image, and it should do the trick.
Thanks! This helped me a lot
Works fine but not in IE. Try to replace bulleted list with additional portion of text and shrink browser window. You will see text indent and columns won’t be equal.
Works fine but not in IE. Try to replace bulleted list with additional portion of text and shrink browser window. You will see text indent and columns won’t be equal. Please fix this.
It actually works perfectly in IE6, 7, and 8
, you may have missed something in the tutorial?
I went ahead and updated my demo page for you, taking out the bullets and added 2 extra paragraphs.
Thanks for quick response. I’ve checked your solution again in IE6 SP2 ( used in my company ) and it doesn’t work properly. I do not know why, maybe it depends on browser version or something…
Great tutorial. Love your site’s design.
Great tutorial. Please double check Steven’s complaint though. Viewing your sample in IE6/SP2, any text that extends below the image will jog over to the left slightly — about 2-3 characters.
You might need to make browser window a little smaller to make text or bullets on right extend vertically.
I’ve tried adjusting paddings & margins for all, but can’t seem to get rid of this.
Any ideas?
Ah, you know what I apologize to both, I was misunderstanding what the issue was. Thanks Louis for making that clear for me~
I just tried a quick fix that worked. (seems to be an IE6 Bug) If you wrap your content (content inside of “detail”) with another div with a float: left; it got rid of the problem for me.
Let me know if that works out for you~
Thanks again fellas
beautiful! worked like a charm.
I’m glad I checked back for your answer. I was messing around with display:inline-block which also fixed but needed different paddings for ie6 (& hence a different css).