help in creating a printable list of results

[mnguyen21]

Hello,
I've been struggling with a tableless desgin in creating a list of results that is also printable.

Each result set is made up of three components
1) star ranking
2) record number
3) description

I've successfully been able to create half of what I want using divs with the following structure.

Here's the CSS:
[tt]
.SR-ResultGroup { margin: 0; padding: 0}
.SR-ResultInfo1 { margin: 0; padding: 0; position: relative; float: left; width: 120;}
.SR-ResultContent { margin: 0; padding: 0; position:relative; float: left; width: 80%
}

[/tt]

Here's the HTML

[tt]
<div class="SR-ResultGroup">
<div class="SR-ResultInfo1" >
<div class="SR-ResultRank">Ranking </div>
<div class="SR-ResultNumber" >RecordNumber.</div>
</div>
<div class="SR-ResultContent" >
<div>
<div class="SR-Title">
content goes here
</div>
<div class="SR-Body">
more content can go here but appears below the title
</div>
</div>
</div>
</div>
[/tt]
my problem is that because I am floating the container divs, the content divs are taken out of the page flow. Consequently, only what is viewable on the browser gets printed! If it happens that all the results fit on the screen then great! no problem. However, if there are many results causing the page to scroll I still only get one page of results.

After many hours of labor I've decided to post this question to a user group in hopes of somebody suggesting something I haven't tried.

Currently, I'm trying to change the divs into unordered lists. Essentially, I'm making each record a horizontal menu using techniques from "A List Apart" and such sites, since those solutions do not require floating elements.

The problem I'm running into now is that for records that have long "descriptions" I want the text to wrap under the third column and not to the left margin. In using lists I've not found a way to achieve this.


If anybody has suggestions on either method, it would be much appreciated.

 

[Vragabond]

I definitely agree you should convert to lists, definition list might even be better than an unordered one. I do not understand however what you mean with having troubles printing floated elements. I print floated elements all the time and have no problems getting it to print multiple pages (what is not visible on the screen). So you might be attacking the wrong part of code in that respect.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[BillyRayPreachersSon]

It sounds like you might need to clear your floats. Look at the "Easy clearing" article on Position Is Everything, or investigate the "clear" CSS property.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[mnguyen21]

Thanks for the tip on clearing the float. It works now. Funny thing is I tried that earlier. At least I thought I did. Going through my stylesheet I found I defined the clear property for the SR-ResultGroup block but I declared it wrong.

Before
[tt]
SR-ResultGroup
{
clear: both;
}

[/tt]
Notice how I forgot the "."?

Now
[tt]
.SR-ResultGroup
{
clear: both;
}

[/tt]

Thanks again.