whitespace and float

[mchristine]

Hi

I would like to have a div with a horizontal overflow, containing images and underneath each image a comment.
I put my texts in the image, but this not what I really wanted

I've tried a div with an overflow:auto and a white-space:no-wrap that works well if there are only images.
But if I want each image to have a <br /> and some text underneath, I tried putting them each in a div, float:left, but then the white-space has no effect, an in-line list cannot get widht and height ... I'm stuck

If you have any ideas how to acheive that, I would welcome them

Thanks

[edited by: tedster at 6:21 am (utc) on Nov. 19, 2007]
[edit reason] no example links, please [/edit]

[Xapti]

You haven't explained what you need the "white-space:nowrap" for.
I don't see why you need non-wrapping text here. Perhaps you don't know what white-space actually does? [w3.org...]
Assuming you have a good reason, have you tried putting the property in the floated divs, and not the main container? It wouldn't make any sense that just because you put the images in a floated div that the text no longer stops wrapping.

Also, I don't see why you put the images horizontally in the first place. They are wide enough that they can go vertically, so you don't end up with anything messy at all. Makes it easier for both you and the user; I just don't see the point of changing it to horizontal.

[mchristine]

In the link I gave as an example, it made sense to have the images scroll horizontally, it is a series of drawings to be seen one after the other as if next to one another on a wall, and it was a specific demand from the artist. And in the other pages of drawings she presents there are more pictures so, the problem is more obvious (especially with a small screen ... and beleive me that still exists!)

So I have a container with a specific width, containing my images, next to each other. This container has a no-wrap, otherwise the pictures would go under each other. I know what it does. So far no problem.
The problem arises when I want to have a text under each picture, that scrolls at the same time as the picture.

I put each of my pictures in a div, with a break and the text, and for my div to be next to each other, they float. Then the no-wrap of the container has no effect.
I don't understand why.

I should probably put my divs in position:absolute, I guess that would be the only solution;

[SuzyUK]

Hi mchristine

this is possible with a bit of working around, the working around because of the lack of complete support for

display: inline-block

- I have a feeling that that property would be the ideal choice for something like this. I don't know what your sample showed, and suggest you do a search for [horizontal scrolling CSS Gallery] or something like that you will likely find some different ideas

One solution is to use a nested div inside the div you want to do the scrolling, this nested div must have its width set wide enough to contain *ALL* your images. The images themselves are wrapped inside floated divs which will be width restricted too in order to contain both the image and a text caption

example; you will likely need to amend widths to suit but something like this might work if your image heights are similar

CSS:
#scroller {
overflow: hidden;
overflow-x: auto;
width: 300px; /* width of scrolling area */
padding: 0 0 20px 0; /* IE needs some padding to cover bottom of vertical scrollbar */
}

#stretch {
width: 500px; /* set this wider than the max width required, i.e. enough to fit ALL images into */
}

#stretch div { /* container div for image and caption */
float: left;
margin: 3px; /* just some whitespace around image if required */
width: 110px; /* little bit wider than the image, without this a long caption will stretch the effect */
}

#stretch img {
display: block; /* this means the caption will st below the image without a <br /> */

/* if all images are fixed dimensions you can put them in here */
width: 100px;
height: 100px;
}

#stretch p {margin: 10px;} /* again just some whitespace around caption adjust to suit */

HTML
<div id="scroller"><div id="stretch">
<div><img src="#" alt="" /><p>some text</p></div>
<div><img src="#" alt="" /><p>some text</p></div>
<div><img src="#" alt="" /><p>some text</p></div>
<div><img src="#" alt="" /><p>some more text to show width restriction</p></div>
</div></div>

not perfect but it might be a start, using absolute positioning would require even more width restrictions/precision so it might be something else to try, it will likely work best if the images are similarly dimensioned

you could post some of your sample code including rough dimensions if you like

let us know

[mchristine]

Hi SuzyUK

This works really well. I changed all the dimensions as you mentioned and it is really nice.

To start withI didn't think the overflow-x was working.

and I absolutely didn't know that :

#stretch img {display: block; /* this means the caption will st below the image without a <br /> */}

As for the artist web site, I eventually used the position: absolute, but there are only 4 pictures max all the same height and the width is settled.

So thanks a lot I learned something really interesting.

Sorry for not answering sooner, I have been extremely busy.

Mchristine

[edited by: tedster at 5:04 am (utc) on Nov. 26, 2007]
[edit reason] no personal urls [/edit]