Div not sized correctly if containing image

[Tony Benham]

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:ri ght"></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

[Kris]

Re: Div not sized correctly if containing image

In article <blei8b$bc3fg$1 @ID-170918.news.uni-berlin.de>,
"Tony Benham" <tonyb@kerriswa y.freeserve.co. uk> wrote:
[color=blue]
> 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:ri ght"></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 ?[/color]

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@xs4al l.netherlands (nl)

[Brian]

Re: Div not sized correctly if containing image

Tony Benham wrote:[color=blue]
> 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.[/color]

That's correct behavior.
[color=blue]
> 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:ri ght"></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.[/color]

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
follow the directions in my address to email me

[Tony Benham]

Re: Div not sized correctly if containing image

"Brian" <usenet1@mangym utt.com.invalid-remove-this-part> wrote in message
news:hBCeb.4747 68$Oz4.302357@r wcrnsc54...[color=blue]
> Tony Benham wrote:[color=green]
> > 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[/color][/color]
with[color=blue][color=green]
> > the text on the left. However the height of the div sizes to fit the[/color][/color]
text[color=blue][color=green]
> > but not the image.[/color]
>
> That's correct behavior.
>[color=green]
> > 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:ri ght"></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[/color][/color]
the[color=blue][color=green]
> > containing div for some reason) but in mozilla1.4/netscape 7.1 it[/color][/color]
doesn't[color=blue][color=green]
> > have any effect.[/color]
>
> 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.
>[/color]
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

[Brian]

Re: Div not sized correctly if containing image

Tony Benham wrote:[color=blue]
>
> http://www.woodleyzebrasfc.com/testpic.html[/color]

operation timed out. server problems?

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

[Lauri Raittila]

Re: Div not sized correctly if containing image

In article <blhdcq$bd9a9$1 @ID-170918.news.uni-berlin.de>, Tony Benham
wrote:[color=blue]
> 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 ?[/color]

"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/www/css/examples/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.

[Tony Benham]

Re: Div not sized correctly if containing image

"Brian" <usenet1@mangym utt.com.invalid-remove-this-part> wrote in message
news:xJYeb.2026 60$mp.124297@rw crnsc51.ops.asp .att.net...[color=blue]
> Tony Benham wrote:[color=green]
> >
> > http://www.woodleyzebrasfc.com/testpic.html[/color]
>
> operation timed out. server problems?
>
> --
> Brian
> follow the directions in my address to email me
>[/color]

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

[Brian]

Re: Div not sized correctly if containing image

Tony Benham wrote:[color=blue]
>[color=green][color=darkred]
>>> http://www.woodleyzebrasfc.com/testpic.html[/color][/color]
>
> Portland are back up at a sensible speed again[/color]

Indeed.
[color=blue]
> if you want to have a look ?[/color]

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.)

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. (?)


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

[Tony Benham]

Re: Div not sized correctly if containing image

> I see no border in the div. How do you know the div's height isn't[color=blue]
> 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.)[/color]

Yes it's Alyson Hannigan from Buffy. I just used her for an example pic.
She's quite cute.
[color=blue]
> 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. (?)[/color]
adding &nbsp ; fixes it for mozilla. I'll try adding a
border/margin/padding as well as Lauri suggested.

Cheers
Tony

[The Plankmeister]

Re: Div not sized correctly if containing image

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


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/explorer/peekaboo.html

[Tony Benham]

Re: Div not sized correctly if containing image

"Lauri Raittila" <lauri@raittila .cjb.net> wrote in message
news:MPG.19e69e ba79688dc4989c8 d@news.cis.dfn. de...[color=blue]
> In article <blhdcq$bd9a9$1 @ID-170918.news.uni-berlin.de>, Tony Benham
> wrote:[color=green]
> > 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[/color][/color]
problem on[color=blue][color=green]
> > left, but not in netscape7.1/moz1.4 ?[/color]
>
> "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.[/color]

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.

[color=blue]
> 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.
>[/color]
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

[Lauri Raittila]

Re: Div not sized correctly if containing image

In article <bljoil$d8jed$1 @ID-170918.news.uni-berlin.de>, Tony Benham
wrote:[color=blue]
> "Lauri Raittila" <lauri@raittila .cjb.net> wrote in message
> news:MPG.19e69e ba79688dc4989c8 d@news.cis.dfn. de...[color=green]
> > In article <blhdcq$bd9a9$1 @ID-170918.news.uni-berlin.de>, Tony Benham
> > wrote:[color=darkred]
> > > 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[/color][/color]
> problem on[color=green][color=darkred]
> > > left, but not in netscape7.1/moz1.4 ?[/color]
> >
> > "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.[/color]
>
> 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.
>
>[color=green]
> > 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.[/color][/color]

I think I was mistaken, I'll try more later. Needs propably couple of
empty spans though.
[color=blue]
> I guess if the white-black part of the image floated right and white is
> filled in on the left that might work ok ?[/color]

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.