Question

I am working on a client site that is driven by EE.

They have a page of technical documents, each with titles of varying length, as well as brief descriptions, also of varying length. In between the two, their design calls for a spacer with leader dots:

For each line item, I have a container and floating DIVs for the title and description:

<div class="cv-lit-lineitem">           
    <div class="cv-lit-title"><h3>Title</h3></div>
    <div class="cv-lit-linespacer"></div>
    <div class="cv-lit-info"><p>Info</p></div>
</div>

The title and info float left and right respectively, and their width is defined by their contents:

.cv-lit-lineitem {
    height: 40px;
    width: 940px;
}

.cv-lit-title {
    height: 16px;
    float: left;
}

.cv-lit-linespacer {
    background-image: url("whitedots.png");
    background-repeat: repeat-x;
    height: 40px;
    display: block;
}

.cv-lit-info {
    height: 16px;
    float: right;
}

I can’t seem to get the spacer div to fill the space inbetween. Setting it to 100% fills the entire container width, and everything else results in a width of 0.

Do I need to employ javascript, or am I missing something obvious?

Thanks for any help,

ty

PS: Here’s a fiddle: http://jsfiddle.net/tylonius/zC8jZ/

Answer 1

You can achieve it with display:table; and display:table-cell;

Check this demo

HTML

<div class="cv-lit-lineitem">             
    <div class="cv-lit-title"><h3>Title</h3></div>
    <div class="cv-lit-linespacer"></div>
    <div class="cv-lit-info"><p>Info</p></div>
</div>​

CSS

.cv-lit-lineitem {
    height: 40px;
    width: 940px;
    display:table;
}
.cv-lit-lineitem > div {
    display:table-cell;
}   
.cv-lit-title {
    height: 16px;
}
.cv-lit-linespacer {
    background-image: url("whitedots.png");
    background-repeat: repeat-x;
    width:100%;
    height:40px;
}    
.cv-lit-info {
    height: 16px;
}​

Unfortunately, this won’t work on IE8 and below.

---

Another simple workaround is to put the dots in the container’s background, then cover it with title’s and info’s backgrounds. But this works only if you have a single-color page background.

Demo