By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,836 Members | 2,181 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,836 IT Pros & Developers. It's quick & easy.

simple "floating pictures" troubles

P: n/a
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
Jan 16 '06 #1
Share this Question
Share on Google+
4 Replies


P: n/a
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.
Jan 17 '06 #2

P: n/a
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
Jan 17 '06 #3

P: n/a
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

Jan 24 '06 #4

P: n/a
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
Jan 25 '06 #5

This discussion thread is closed

Replies have been disabled for this discussion.