In addition to your snippet, I had to add the following CSS attributes
to the <LI> element:

        position: relative;
        overflow: auto;

and slightly increased the width of the container <UL> element. It is
now showing up as expected.

Thanks for your help!


On Nov 11, 2:15 pm, Yogesh Agashe <> wrote:
> I have a list with 3 columns. This is the code. You just modify it a little 
> bit for your page.
> <li>
> Name
> <span class='citystateinlist'>City,State</span>
> <span class='dateinlist'>Date</span>
> </li>
> .dateinlist{
>     float: right;
>     width: 80px;
> }
> .citystateinlist{
>   float: right;
>   width: 150px;
> }
> Ashwin wrote:Hi Yogesh, You gave me some food for thought! I added 
> float:left; and width: 300px; attributes to all the <span> tags just to see 
> how that turns out. When I do that, the <span> elements are outside the 
> enclosing <li> elements, one below the other. I am no CSS expert, so I could 
> be messing up somehow in that area. Can you send me a relevant snippet of the 
> CSS that you employ for this effect? Thanks, Ashwin On Nov 11, 12:59 pm, 
> Yogesh Agashe<>wrote:Hi Ashwin, How about floating the 
> span elements? I have similar list and I use float. Add a class to your span 
> elements. In CSS, assign a width and float them left or right as per your 
> requirement. HTH. Yogesh Ashwin wrote:One of the reasons I like the Google 
> Suggest powered autocomplete function at Google Finance 
> ( is because the drop choice choices appear in a 
> tabular format with 2 columns. The left column contains the ticker symbol and 
> the right column contains the company name. I am trying to emulate a similar 
> effect but with 4 columns. Without thinking about customization, my first 
> attempt involves trying to return data that looks like this from the server 
> side<ul>   <li><span style="width:50px;">1</span><span style="width: 
> 150px;">Jane</span><span style="width:150px;">Doe</span><span 
> style="width:250px;">Director</span></li>   <li><span 
> style="width:50px;">2</span><span style="width: 150px;">John</span><span 
> style="width:150px;">Doe</span><span style="width:250px;">Manager</span></li> 
>   <li><span style="width:50px;">3</span><span style="width: 
> 150px;">Peter</span><span style="width:150px;">Trent</span><span 
> style="width:250px;">Developer</span></li> </ul>In a regular HTML page, this 
> has a tabular look to it. But when this content gets loaded in the 
> autocompleter's DIV element, it gets treated just like HTML whitespace.Am I 
> missing something here, or are there better ways of doing this?Thanks!Ashwin- 
> Hide quoted text -- Show quoted text -
You received this message because you are subscribed to the Google Groups 
"Prototype &" group.
To post to this group, send email to
To unsubscribe from this group, send email to
For more options, visit this group at

Reply via email to