Div not sized correctly if containing image

I have a main div on a page that contains some text plus an img which is
floated right, causing the image to be placed on the right of the div with
the text on the left. However the height of the div sizes to fit the text
but not the image. I want the div to size in height to fit the height of the
image.
After searching google I found a suggestion to add
<div style="clear:right"></div> at the bottom of the containing div just
before the ending </div>

This seems to work ok in ie (although it screws up the left margin of the
containing div for some reason) but in mozilla1.4/netscape 7.1 it doesn't
have any effect.

Is there another technique I could use ?

Regards

Tony

In article <blei8b$bc3fg$1 (AT) ID-170918 (DOT) news.uni-berlin.de>,
"Tony Benham" <tonyb (AT) kerrisway (DOT) freeserve.co.uk> wrote:

I have a main div on a page that contains some text plus an img which is
floated right, causing the image to be placed on the right of the div with
the text on the left. However the height of the div sizes to fit the text
but not the image. I want the div to size in height to fit the height of the
image.
After searching google I found a suggestion to add
div style="clear:right"></div> at the bottom of the containing div just
before the ending </div

This seems to work ok in ie (although it screws up the left margin of the
containing div for some reason) but in mozilla1.4/netscape 7.1 it doesn't
have any effect.

Is there another technique I could use ?

I often use <br class="break">
..break { clear: both; }

The real method of course is:
img { float: right; }
img:after { clear: right; }

But MSIE does not support the :after pseudo-selector.

--
Kris
kristiaan (AT) xs4all (DOT) netherlands (nl)

"Brian" <usenet1 (AT) mangymutt (DOT) com.invalid-remove-this-part> wrote

Tony Benham wrote:
I have a main div on a page that contains some text plus an img which is
floated right, causing the image to be placed on the right of the div
with
the text on the left. However the height of the div sizes to fit the
text
but not the image.

That's correct behavior.

I want the div to size in height to fit the height of the
image.
After searching google I found a suggestion to add
div style="clear:right"></div> at the bottom of the containing div just
before the ending </div

This seems to work ok in ie (although it screws up the left margin of
the
containing div for some reason) but in mozilla1.4/netscape 7.1 it
doesn't
have any effect.

That should work; in fact, I have used it with success in Mozilla
1.3/win2k.

Check your html and css for errors. Then, supply a url.

Brian,

Both css & html are css2.0, xhtml1.0 valid respectively.
http://www.woodleyzebrasfc.com/testpic.html
contains an example. This is sort of ok in ie6, apart from margin problem on
left, but not in netscape7.1/moz1.4 ?
Regards
Tony

In article <blhdcq$bd9a9$1 (AT) ID-170918 (DOT) news.uni-berlin.de>, Tony Benham
wrote:

Brian,
Both css & html are css2.0, xhtml1.0 valid respectively.
http://www.woodleyzebrasfc.com/testpic.html
contains an example. This is sort of ok in ie6, apart from margin problem on
left, but not in netscape7.1/moz1.4 ?

"Works" with Opera 7.20, after I use fullscreen to get text and image
side by side. It seems to make extra line at the bottom though.

The reason it don't work on Mozilla is collapsing margins, I think. I'm
not at all sure if W3 people intended collapsing happen here, but
according to spec it should IIRC. Add some border, padding, or content to
that extra div or borrom-border or -padding to container. For example,
purple bottom border.

BTW, the heading image slicing I promised to you is still not ready.
http://www.student.oulu.fi/~laurirai...img_after.html
The anti-aliasing is quick and dirty, and it is not tested much - and
some of the images aren't optimized. The effect that you use on your
current site about having black on right expand is propably impossible on
IE.


--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

"Brian" <usenet1 (AT) mangymutt (DOT) com.invalid-remove-this-part> wrote

Tony Benham wrote:

http://www.woodleyzebrasfc.com/testpic.html

operation timed out. server problems?

--
Brian
follow the directions in my address to email me

Brian,
Portland are back up at a sensible speed again if you want to have a look ?
Cheers
Tony

I see no border in the div. How do you know the div's height isn't
affected? Put borders around things -- bright borders -- to
troubleshoot things. You know this better than I do. I'm looking at
it for the first time. (BTW, that's the actress from "Buffy," right?
It was my sister's favorite tv show.)

Yes it's Alyson Hannigan from Buffy. I just used her for an example pic.
She's quite cute.

If you are sure it is not working, try
div style="clear: left">&nbsp;</div
but, I must admit, I use an empty div for this on my pages, and it
works, Moz 1.3/Win2k. (?)
adding &nbsp ; fixes it for mozilla. I'll try adding a

border/margin/padding as well as Lauri suggested.

Cheers
Tony

This seems to work ok in ie (although it screws up the left margin of the
containing div for some reason) but in mozilla1.4/netscape 7.1 it doesn't
have any effect.

Check this out... I'm surprised it works for you in IE! I have the same
problem on my site but I have to set "background : none" for the floatholder
to get it to work...

http://www.positioniseverything.net/.../peekaboo.html

"Lauri Raittila" <lauri (AT) raittila (DOT) cjb.net> wrote

In article <blhdcq$bd9a9$1 (AT) ID-170918 (DOT) news.uni-berlin.de>, Tony Benham
wrote:
Brian,
Both css & html are css2.0, xhtml1.0 valid respectively.
http://www.woodleyzebrasfc.com/testpic.html
contains an example. This is sort of ok in ie6, apart from margin
problem on
left, but not in netscape7.1/moz1.4 ?

"Works" with Opera 7.20, after I use fullscreen to get text and image
side by side. It seems to make extra line at the bottom though.

The reason it don't work on Mozilla is collapsing margins, I think. I'm
not at all sure if W3 people intended collapsing happen here, but
according to spec it should IIRC. Add some border, padding, or content to
that extra div or borrom-border or -padding to container. For example,
purple bottom border.

Hi Lauri,
I added padding : 1px ; to the extra div which fixes the problem, as does
adding a &nbsp; into the div.
Thanks for the tip.

BTW, the heading image slicing I promised to you is still not ready.
http://www.student.oulu.fi/~laurirai...img_after.html
The anti-aliasing is quick and dirty, and it is not tested much - and
some of the images aren't optimized. The effect that you use on your
current site about having black on right expand is propably impossible on
IE.

I guess if the white-black part of the image floated right and white is

filled in on the left that might work ok ?

Thanks anyway
Tony

In article <bljoil$d8jed$1 (AT) ID-170918 (DOT) news.uni-berlin.de>, Tony Benham
wrote:

"Lauri Raittila" <lauri (AT) raittila (DOT) cjb.net> wrote in message
news:MPG.19e69eba79688dc4989c8d (AT) news (DOT) cis.dfn.de...
In article <blhdcq$bd9a9$1 (AT) ID-170918 (DOT) news.uni-berlin.de>, Tony Benham
wrote:
Brian,
Both css & html are css2.0, xhtml1.0 valid respectively.
http://www.woodleyzebrasfc.com/testpic.html
contains an example. This is sort of ok in ie6, apart from margin
problem on
left, but not in netscape7.1/moz1.4 ?

"Works" with Opera 7.20, after I use fullscreen to get text and image
side by side. It seems to make extra line at the bottom though.

The reason it don't work on Mozilla is collapsing margins, I think. I'm
not at all sure if W3 people intended collapsing happen here, but
according to spec it should IIRC. Add some border, padding, or content to
that extra div or borrom-border or -padding to container. For example,
purple bottom border.

Hi Lauri,
I added padding : 1px ; to the extra div which fixes the problem, as does
adding a &nbsp; into the div.
Thanks for the tip.


BTW, the heading image slicing I promised to you is still not ready.
http://www.student.oulu.fi/~laurirai...img_after.html
The anti-aliasing is quick and dirty, and it is not tested much - and
some of the images aren't optimized. The effect that you use on your
current site about having black on right expand is propably impossible on
IE.

I think I was mistaken, I'll try more later. Needs propably couple of
empty spans though.

I guess if the white-black part of the image floated right and white is
filled in on the left that might work ok ?

That would happen easiest by floating whole #top to right (might cause
some difference on MacIE though). I don't think that will look as nice
though. The current way (in IE) of streching white between logo and text
is IMHO nicer looking.

What way would you prefer?

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.