Liquid display problem

[geoff Smith]

Hello.. another question...

I an trying to use CSS to produce a "table like" but liquid layout that
will fit a number of divs across the page depending on the width of the
browser window. It nearly works but....

If you look at http://www.fogcat.co.uk/cal.php and size the window so that
there are 3 months of the calendar across the screen you will see what I
mean. Because not all months are the same height and the divs are floating
the second row starts after the taller month rather than at the left.

Is it possible to get the second row to start at the left? In this case I
could make sure all months are the same height - but there will be cases
where i want to do the same thing for images, some portrait and some
landscape.

The css is at http://www.fogcat.co.uk/cal.css

[geoff Smith]

cracked it - using spans instead of divs

http://www.fogcat.co.uk/cal2.php

[geoff Smith]

geoff Smith <ge...@spiced.ham.fogcat.co.uk> wrote in
news:Xns94D2F1CA6FFFA...@62.253.162.202:

> cracked it - using spans instead of divs
>
> http://www.fogcat.co.uk/cal2.php
>

hmmm - except that doesn't work in Firefox

[Laurens Holst]

geoff Smith wrote:
> Is it possible to get the second row to start at the left? In this case I
> could make sure all months are the same height - but there will be cases
> where i want to do the same thing for images, some portrait and some
> landscape.

Well, if you could get the tables to behave like images in a line...
those resize the line height to the maximum size of each line. I think
you need display:inline-block for the divs, and display:inline-table for
the tables... but I haven't exactly gotten it working yet either :).

This bug mentiones something about inline-table not being implemented in
Gecko yet... though it's rather vague.
http://bugzilla.mozilla.org/show_bug.cgi?id=18217

That set aside, a few tips to make your css file smaller:
- use short colour notations: #963 is equal to #996633...
- use shorthands, for example: border: 1px solid #0F0; or
font: xx-small arial, helvetica;

Also, setting width: auto is not needed on a div element (default value
for width is already auto).

And instead of using 'fillers' you could just define table cells with no
content. Then set empty-cells:hide;.

~Grauw

--
Ushiko-san! Kimi wa doushite, Ushiko-san!!