Flowing things to width of screen

[Fraggle]

I am not sure if this is possible, and i cannot get google to tell me,
so i am trying here!

I wish to display a list of addresses, probably about 20, and i want
them to be in a grid formation. However i want the number of
addresses accross the screen to be decided by the browser (depending
on the width of the window being used) so a hard coded table is not
great.

I am fairly sure i have seen a solution somwhere, but now i cannot
locate it :(

I assume that any solution would work with screenreaders/phones etc
simply by having one long list of addresses.

Hmm hope that description is clear, here is some ascii art to help
you!

O <- this is a block of text representing one address

| <- left of screen(or browser window (or whatever)) |
| right of screen(or browser window (or whatever)) -> |

example with wide screen
|OOOOOOO|
|OOOOOOO|
|OO |

Example with narrow screen
|OO|
|OO|
|OO|
|OO|
|OO|
etc etc
any hints and tips gratfully recieved

Fragg

[Jim Dabell]

Fraggle wrote:

I am not sure if this is possible, and i cannot get google to tell me,
so i am trying here!
When talking about presentation,
<URL:news:comp. infosystems.www .authoring.styl esheets> is usually a better
choice. Followups set.

I wish to display a list of addresses, probably about 20, and i want
them to be in a grid formation. However i want the number of
addresses accross the screen to be decided by the browser (depending
on the width of the window being used) so a hard coded table is not
great.
Float the elements to the left and set a width. It's come up a few times in
ciwas lately in the context of thumbnails for a picture gallery, so check
Gooja.

I assume that any solution would work with screenreaders/phones etc
simply by having one long list of addresses.

Yup, all you want is simple, meaningful markup:

<ul class="address" >
<li>Address 1</li>
<li>Address 2</li>
<li>Address 3</li>
<li>Address 4</li>
</ul>

..address, .address li {
display: block;
margin: 1em;
padding: 1em;
}

..address li {
float: left;
width: 10em;
border: medium solid black;
}

--
Jim Dabell