So here's my first question for the doctype crowd/cloud:

I am in the process of making the css for a gallery slider. I have a wrapping div#gallery, and within it div#gallery_strip

#gallery_strip {
height: 470px;
float: left; /*to attempt to contain elements within it.
}


#gallery {
height: 440px;
width:  960px;
}

The gallery strip will be populated with a collection of left floated images. However, the problem is that when they reach the boundary of the gallery strip's parent container, they break to the next row, (and I want them all on one row). Since there will be a variable number of entries in the strip, I can't hard code a width - and the only workaround I can think of at the moment is to use PHP to insert an inline width into the gallery strip based on how many rows I have returned from a db-query.

  • this might be obvious if i were looking at the whole page, but why is your #gallery_strip 30px taller than your #gallery? you don't know how MANY images you're going to have, but do you know what size they'll be? if they're all the same (or reasonably close) height, you should size your #gallery_strip and #gallery with the same height as the images (or tallest image). jenny ham about 7 years ago

2 answers

danwellman 5600
1
point

I usually work out the number of images in the strip and set an inner container (inside the outer wrapping div) to the same width as the total of the images with JS. Set the height of this div to be the height of a single image and float the images left and they will all stack up horizontally. Don't forget to set overflow:hidden on the container ;)

You might not need to set the width explicitly, maybe using an inner container with white-space:pre and a set height on it would force the images not to wrap..?

Answered about 7 years ago by danwellman
  • I've kind of done that in PHP, but given that the slider has to use JS to facilitate the slider, that might be an idea... sunwukung about 7 years ago
1
point

try:

#gallery_strip {
height: 192px;
white-space: nowrap;
}

#gallery_strip img{
display: inline;
}

#gallery {
height: 220px;
width:  960px;
overflow:auto;
}

which looks like: http://www.boldfishclient.co.uk/doctype/kA4/

Answered about 7 years ago by Tony Crockford
  • Hmm, thanks for that - doesn't seem to work tho... sunwukung about 7 years ago
  • how does it not work? which browser? Tony Crockford about 7 years ago
  • I tested it in FF, although it's sitting inside my colleagues CSS - so I need to test it in isolation before I can verify sunwukung about 7 years ago
  • nope, tested it on it's own, doesn't appear to do what I'm looking for...although it's brought my attention to the whitespace attribute! sunwukung about 7 years ago