I'm going to go crazy. I used search and google, but could not find a solution, it will not work :(
I have a div nested in other divs for automatic vertical centering and for the background. Initially, it corresponds vertically to several images and dynamically resizes them. I use several CSS styles depending on the number of images (width, padding).
But for this gallery I have many photos, the original layout is divided into several lines, but I want the nested "white space: nowrap" with overflow-x: auto; in my div. So I can scroll them, but "white-space: nowrap" removes all the material, breaking all the display: table attributes.
I suppose this should happen? But then I need a different solution or the smallest hint.
I also made a simplified fiddle: http://jsfiddle.net/x696B/9/ if you remove the mapping table attributes, they work and scroll. I need this in my div .: D
Here is my nooby css (corresponding part)
html { height:100%; } body { height:98%; background-color: #FFF9E5; padding: 0px; } .wrapper { margin:auto; padding: 0px; z-index: 0; height:100%; width:100%; display:table; vertical-align:middle; } .outer { z-index: 0; padding: 0px; display:table-cell; vertical-align:middle; background-color: #FFF9E5; } div.container { margin: 0 auto; display:table; z-index: 0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; width:60%; background-color: #867F27; padding-right:1%; padding-left:1%; white-space: nowrap; overflow: auto; } .view { width:100%; white-space: nowrap; overflow-x: auto; margin: 0 auto; text-align: left; }
If I mark display: table and display: table-cell as a comment, the gallery looks good and scrolls, but it is not centered. (got other divs with logo etc.)
here is my html
<meta http-equiv="X-UA-Compatible" content="IE=9" /> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="de"> <head> <meta charset="utf-8"> <title>my page</title> <style type="text/css"> @import url("style.css"); </style> </head> <body> <div class="wrapper"> <div class="outer"> <div class = "logo"><img src="logo.png"/></img></div> <div class="container"> <div class="view"> <img src="http://lorempixel.com/output/nature-qc-205-154-1.jpg"/> <img src="http://lorempixel.com/output/nature-qc-205-154-2.jpg"/> <img src="http://lorempixel.com/output/nature-qc-205-154-3.jpg"/> <img src="http://lorempixel.com/output/nature-qc-205-154-4.jpg"/> <img src="http://lorempixel.com/output/nature-qc-205-154-5.jpg"/> <img src="http://lorempixel.com/output/nature-qc-205-154-6.jpg"/> <img src="http://lorempixel.com/output/nature-qc-205-154-7.jpg"/> <img src="http://lorempixel.com/output/nature-qc-205-154-8.jpg"/> <img src="http://lorempixel.com/output/nature-qc-205-154-9.jpg"/> <img src="http://lorempixel.com/output/nature-qc-205-154-1.jpg"/> <img src="http://lorempixel.com/output/nature-qc-205-154-2.jpg"/> <img src="http://lorempixel.com/output/nature-qc-205-154-3.jpg"/> <img src="http://lorempixel.com/output/nature-qc-205-154-4.jpg"/> <img src="http://lorempixel.com/output/nature-qc-205-154-5.jpg"/> <img src="http://lorempixel.com/output/nature-qc-205-154-6.jpg"/> <img src="http://lorempixel.com/output/nature-qc-205-154-7.jpg"/> <img src="http://lorempixel.com/output/nature-qc-205-154-8.jpg"/> <img src="http://lorempixel.com/output/nature-qc-205-154-9.jpg"/> <img src="http://lorempixel.com/output/nature-qc-205-154-1.jpg"/> <img src="http://lorempixel.com/output/nature-qc-205-154-2.jpg"/> </div> </div> </div> </body> </html>
Oh, and forgive me this dumb question, so far this forum has been a great help, but now I lost.
early.