what to do when you need a tight fitting grouping

[Michael Joel]

I am creating a directory of services.
A div of 100% width contains to divs to divide it in half. left is for
service information, right is for contact information.

My css
.listingLeft {
float: left;
width: 55%;
overflow: wrap;
margin: 0px;
padding-left: 0.5em;
padding-right: 0.5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
border: 0px;
}
.listingRight {
float: right;
width: 25em;
margin: 0px;
padding-left: 0.5em;
padding-right: 0.5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
border: 0px;
background: #202020;
}

Problem is of course if the width isn't just right then the URLs in
the right column get wrapped (not nice looking). OR the right div gets
dropped down a few lines if the left div content is to wide.

Tables would seem better since they would automatically flex in or out
with content (which is good for the right side but not the left side).
How would you work this?
Mike

[Jonathan N. Little]

Hmmm sounds like tabular data to me.

service | contact
--------+--------

NOTE: Using CSS does not mean you should never use a table.


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[dorayme]

In article <rl79f7dnv1fr39tvk...@4ax.com>,

First, the right tool for the job is an HTML table. That is what
a table is for, it relates lists in logical ways, it is a largely
visual device to group items of one kind in such a way that items
of another kind can be seen to be related. No other element can
quite do this job as well.

For a table, you would have service information in cells in a
left column and contact information in cells in the column to the
right, each contact would relate to a service on the same table
row.

Without an HTML table, you *could* (but should not) 'work it' all
sorts of other ways. You could even have a picture of a table, a
picture of a couple of lists side by side (before they wrapped),
you *could* (but should not) do what you are trying above in
various modified forms.

One modified form would be to put your two lists in a container
that has a width calculated to always fit the two lists in side
by side.

There are some tricky issues with lists when calculating widths
to do with that the bullet points or numbers that default appear,
appear in margin or padding space. Margins and paddings in modern
standard HTML docs are outside the *width* of an element. If you
specify a width, be it in any units for an element, any margins
and paddings and borders will be outside this. Queer stuff it
might seem but that is how it is for various reasons which we can
pass over. The point is that when going for a pair of lists side
by side that will never wrap as long as CSS is operational, you
need to be careful of all sorts of things.

The simplest way, perhaps is to avoid having to calculate too
much! How about:

.listingLeft {
float: left;
width: 50%;
padding: 0;
margin: 0;
background: #fcc;
list-style-type: none;
}

.listingRight {
float: left;
width: 50%;
background: #cfc;
padding: 0;
margin: 0;
list-style-type: none;
}

with

<ul class="listingLeft">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>

<ul class="listingRight">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>

or simpler even and might suit

.services {
float: left;
width: 50%;
padding: 0;
margin: 0;
list-style-type: none;
}

<ul class="services">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>

<ul class="services">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>


But remember, if one of the list items is long and wraps in *its*
available width - and it gets longer as users up their text size
- it will throw the visual correspondence between the list items
in the two lists off! You could juggle till you go dizzy trying
to fix this but why bother when an HTML table has got inbuilt
magic to handle this correspondence?

--
dorayme

[dorayme]

In article <dorayme-5C9A76...@news.albasani.net>,

dorayme <dor...@optusnet.com.au> wrote:

> The simplest way, perhaps is to avoid having to calculate too
> much! How about:
>
> .listingLeft {
> float: left;
> width: 50%;
> padding: 0;
> margin: 0;
> background: #fcc;
> list-style-type: none;
> }
>
> .listingRight {
> float: left;

This last should have read 'float: right' but it does not really
matter much.

--
dorayme