CSS and wrapping

Hi there,

couldn't find any threads here that solve my current CSS problems.

Anyway, I've got a DIV with 3 images which is 400px wide for example. As soon as I resize the browser to below 400px width the images inside the DIV begin to shift downwards.

CSS :



How can I turn this off, i.e. I want the images to stay where they are.


Also, writing HTML like this :

<div>
<img src="file1" />
<img src="file2" />
</div>

produces gaps between the images. To get rid of the gaps I have to write it like :

<div><img src="file1 /><img scr="file2 /></div>

But this is of course not as readable as the first method.

Is there a fix for this


thanks alot

I'm not sure (without some code) exactly what's going on, but I think you could get around what you describe by putting a small, wide transparent gif some where in your doc - effectively setting a minimum width for the doc...

cheers,

but I'm trying to write W3C compliant pages and I've read that with CSS there is no need for transparent pixels anymore

Anyway here's the code:



As soon as I resize the browser window the images shift to fit in the browser width. Also notice that I wrote the <div> all on one line, otherwise the div doesn't render properly, i.e. the gaps between the images.

Is this a bug or isn't any whitespace allowed between the <img> tags, if you want the images to appear one after the other ( horizontally without any gaps )

thanks again

OK,

found some answers. Basically I have to use following style :

white-space: nowrap

But this doesn't work in IE5. So in IE5 I have to use
<nobr></nobr>

But this on the other hand isn't HTML4.01 compliant. Is there another workaround that is still W3C compliant ?


Also still haven't found an answer to my 2nd problem, i.e. the need to write a <div> which contains <img> all on one line, to avoid gaps between the images.


cheers