Chris micek

Dynamic Width List Images using just HTML/CSS

February 20th, 2009

In an article posted on Smashing Magazine today (Ask SM [CSS/JS]: Divs of Equal Height, Dealing with IE 6), the writer determined that the only solution to the following question is the use javascript/jquery.

Is it possible to create a list with CSS that has the text aligned to the right side, but on the left side has an image taking up the width of the remaining space?

That didn’t seem right to me, so I came up with a solution that used HTML/CSS and overlaying images. (Final Solution)

1. Using CSS, I applied a repeating image of the line to each list item (<li>) (step 1)
2. I wrapped the text of each list-item in a <div> and gave that div tag a white background: so that the line doesn’t cross through it. (step 2)
3. I put an empty <span> tag at the beginning of the <div> and applied my gradient to that span. (step 3)
4. Using Absolute positioning I moved the <span> 100px to the left (the width of the gradient image.) (step 4)

There you go, tested in Firefox 3, Safari, IE6, and IE7

HTML

<ul>

<li>
<div><span></span>List Item Number One</div>
</li>

<li>
<div><span></span>Long, Multi Line List Item Long, Multi Line List Item Long, Multi Line List Item Long, Multi Line List Item</div>
</li>

<li>
<div><span></span>List Item Number Three</div>
</li>

</ul>

CSS

ul{
list-style:none;
width:60%;
}

li{
position:relative;
float:right;
width:100%;
text-align:right;
background:url(line.jpg) repeat-x;
background-position:0px 13px;
margin: 0 0 8px 0;
}

li span{
position:absolute;
height:100%;
width:100px;
top:0px;
left:-100px;
background:url(line-grad.jpg) no-repeat;
background-position:0px 13px;
}

li div{
font-weight:normal;
background:#fff;
margin-left:200px;
position:relative;
float:right;
}

Images

(Basic Line)

(Line Gradient)