simple "floating pictures" troubles

[bugbear]

Hello;
I have (tried) to change my geocities
site to be "styled" not "tabled".

It's certainly made the HTML nicer.

But it doesn't work as nicely
I'd like.

And it almost doesn't work at all under IE.

The only page I've updated so far is:
http://geocities.com/plybench/record.html

My intention is for the pictures that correspond
to a paragraph to sit at the same level as the paragraph, and be centred
in a "nice" area to the right of the text.

If the pictures are large, they should expand to the left,
squishing the text up a little, but most pictures are
(in fact) thumbnails. This doesn't work well at the moment.

The older table code (e.g.
http://geocities.com/plybench/bowsaw.html
)
is closer to the behaviour I want, but I'm
open to design ideas as well as implementation tips.

I assume I'm falling foul of an IE bug,
bug I can't work out which one.

BugBear

[Andy Dingley]

On Mon, 16 Jan 2006 17:09:28 +0000, bugbear
<bugbear@trim_papermule.co.uk_trim> wrote:

I have (tried) to change my geocities
site to be "styled" not "tabled".

Try reading the article on CSS floats at brainjar.com It's generally
thought to be the only readable article that _really_ explains how it
all works - particularly how "clear" doesn't clear quite as much as most
people expect it to, and why the text keeps on flowing onwards despite.
I don't know just what effect you're after - but if it's what I think,
then here's my attempt at it.
http://codesmiths.com/shed/things/smithing/casting/

You _need_ the extra <br> just before the <div> around the image.
Sorry about the CSS bloat. It's an old site and there's a lot of legacy
cruft in there I've not had time nor inclination to tidy away.
<div class="images-on-left" > is the key to it all and
<div class="figure" > around the images.

[bugbear]

Andy Dingley wrote:

On Mon, 16 Jan 2006 17:09:28 +0000, bugbear
<bugbear@trim_papermule.co.uk_trim> wrote:

I have (tried) to change my geocities
site to be "styled" not "tabled".

Try reading the article on CSS floats at brainjar.com It's generally
thought to be the only readable article that _really_ explains how it
all works - particularly how "clear" doesn't clear quite as much as most
people expect it to, and why the text keeps on flowing onwards despite.

That looks like a great write up. I shall consider
it an an excellent meta-answer to my question.

BugBear

[bugbear]

bugbear wrote:

Andy Dingley wrote:

Try reading the article on CSS floats at brainjar.com

http://www.brainjar.com/css/positioning/default.asp

OK. Read it. Tried some stuff. Still failing.

The behaviour I want is:
A group of pictures, displayed
centred in a container.

The container should be at least 240 pixels wide.

(intent so far: display a group of thumbnails
with some aesthetic white space)

If any of the pictures are too large too fit,
the container should grow.
(intent: if an image isn't a thumbnail,
use more space, keep eveything centred)

The container should float right.

(intent: the group of contained pictures illustrate the text)

(sample tagged page, and proto style sheet
http://geocities.com/plybench/record.html
)

How do I make a floated container grow
to suit it's contents. Since this is hand edited
I'd rather not have to hand-code each width.

BugBear

[bugbear]

OK. It works. But only under Mozilla and Konqueror.

I'm up against IE bugs.

The behaviour I want is:
A group of pictures, displayed
centred in a container.

The container should be at least 300 pixels wide.

(intent so far: display a group of thumbnails
with some aesthetic white space)

If any of the pictures are too large too fit,
the container should grow.
(intent: if an image isn't a thumbnail,
use more space, keep eveything centred)

The container should float right.

http://geocities.com/plybench/record.html
(and http://geocities.com/plybench/style.css
of course)

do the right stuff.

To get what I want I'm using:

..text_with_photos .illus {
display:table-cell;
empty-cells:show;
margin-left:10px;
margin-right:40px;
float:right;
width:auto;
min-width:300px;
}

As I understand matters both display:table-cell
(which makes my container grow for large images)
and the width stuff have "issues" under IE.

Now - how do I persuade IE to handle it?

BugBear