Geek Answers Handbook

Align DIVs horizontally in a scrollable div

I am working on a photographic site. One of the things we strive for is the type of “film” display for images, in contrast to the usual thumbnail or “tabular” formation.

He works with tables. No problem. The only thing that makes me not want to use the table is the fact that I do not display data, there is no need for columns and rows.

Another thing that is a small wrench in gears is that I put the images as a background div. This is for the main “copy protection”, and also so that I can overlay elements on top of the photo when hovering over a div.

I am currently encoded like this:

container [ [image] [image] [image] [image] ]

I drew a diagram to help with visualizing this.

alt text

As soon as the width of the container is satisfied, div-images will be reduced to the next line. CSS for Divs is as follows:

 .gallery_block_image_p { width: 354px; height: 532px; display: inline-block; margin: 0px; padding: 0px; margin-left: 10px; float: left; background-repeat: no-repeat; }

and for the container ...

 #gallery { border: 0px solid black; position: relative; top: 99px; /* width: 8000px; */ /* When this is uncommented it works, with a huge amount of space to the right */ height: 532px; z-index: 99; }

and, just as importantly, the HTML used to div div images ...

 <div id="gallery_1_0_img" class="gallery_block_image_p" style="background-image: url(gallery_img/ith/adamd_20101021_137.jpg);"></div>
+4
source share
7 answers

if you remove "float: left;" from the gallery block style and add “white-space: nowrap” to the container, then it should work.

Edit: I think something like this is what you are looking for

 <div style="width: 800px; overflow-x:auto; white-space: nowrap;"> <div style="width: 300px; height: 100px; background-color: #f00; display: inline-block;"></div> <div style="width: 300px; height: 100px; background-color: #0f0; display: inline-block;"></div> <div style="width: 300px; height: 100px; background-color: #00f; display: inline-block;"></div> <div style="width: 300px; height: 100px; background-color: #ff0; display: inline-block;"></div> </div>
+3
source

Try specifying a width of 800 and adding an overflow declaration:

 #gallery { border: 0px solid black; position: relative; top: 99px; width: 800px; height: 532px; z-index: 99; overflow:auto; }
0
source

try using the overflow property for the container. so something like this:

 #gallery { overflow-x: scroll; overflow-y: hidden; }

here are some examples http://www.brunildo.org/test/Overflowxy2.html

0
source

I think you may need to determine the width of your gallery! see fiddle I added a view to hold it all down, but it seems you didn’t seem to find a way to force the line, could do something with positioning. Alternatively declare the width at the top of the page using server-side logic instead of javascript on the fiddle

0
source

Not tested, but you could use

Whitespace: Nowrap;

css property to stop wrapping divs when specifying width?

0
source

I came up with a bit of a hacker solution, the only drawback of which is that you need to know the width of the scroll gallery. I am pretty sure it’s pretty easy to predefine or calculate. Below is the code and here is an online demo .

Some sassy jQuery will allow you to calculate all this on the fly if the results are dynamic.

 <style type="text/css"> #gallery { border: 0px solid black; position: relative; width:500px; height: 450px; overflow:scroll; overflow-y:hidden; z-index: 99; } .gallery_block_image_p { width: 354px; height: 400px; margin: 0 0 0 10px; padding: 0; background-repeat: no-repeat; display:inline-block; } #stretch{ width:1850px; } </style> <div id="gallery"> <div id="stretch"> <div id="gallery_1_0_img" class="gallery_block_image_p" style="background-image: url(http://blogs.westword.com/demver/kitten.JPG);"></div> <div id="gallery_1_0_img" class="gallery_block_image_p" style="background-image: url(http://blogs.westword.com/demver/kitten.JPG);"></div> <div id="gallery_2_0_img" class="gallery_block_image_p" style="background-image: url(http://blogs.westword.com/demver/kitten.JPG);"></div> <div id="gallery_3_0_img" class="gallery_block_image_p" style="background-image: url(http://blogs.westword.com/demver/kitten.JPG);"></div> <div id="gallery_4_0_img" class="gallery_block_image_p" style="background-image: url(http://blogs.westword.com/demver/kitten.JPG);"></div> </div> </div>
0
source

I did something very similar to the site and was challenged by this as the user would add / remove divs on their own. My solution for this was to use jQuery to count each element / div in the container and set the width of the container based on the elements in the container.

JQuery

  $('.gallery-item').each(function(scroll){ n = n+310; }); $('#gallery').css( "width", n); });
0
source

More articles:


All Articles