I am about to go crazy. I used the search and google, but could not come up with a solution, it won't work :(
I have a div nested in other divs for automatically vertical centering and for the background. Originally it fits vertically several images and resizes them dynamically. I use several css styles according to the number of pictures (width, padding).
But for this gallery I have to much pictures, the original layout breaks into several lines, but I want a nested "white-space:nowrap" with overflow-x: auto; in my div. So I can scroll them, but "white-space:nowrap" blows the whole stuff an breaks all the display:table attributes.
I suppose this should happen? But then I need an otehr solution or a least a kind hint.
I also made a simplified fiddle: http://jsfiddle.net/x696B/9/ if you remove the display table attributes it works, and scrolls. I need that in my div. :D
Here is my nooby css (relevant 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 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-q-c-205-154-1.jpg"/>
<img src="http://lorempixel.com/output/nature-q-c-205-154-2.jpg"/>
<img src="http://lorempixel.com/output/nature-q-c-205-154-3.jpg"/>
<img src="http://lorempixel.com/output/nature-q-c-205-154-4.jpg"/>
<img src="http://lorempixel.com/output/nature-q-c-205-154-5.jpg"/>
<img src="http://lorempixel.com/output/nature-q-c-205-154-6.jpg"/>
<img src="http://lorempixel.com/output/nature-q-c-205-154-7.jpg"/>
<img src="http://lorempixel.com/output/nature-q-c-205-154-8.jpg"/>
<img src="http://lorempixel.com/output/nature-q-c-205-154-9.jpg"/>
<img src="http://lorempixel.com/output/nature-q-c-205-154-1.jpg"/>
<img src="http://lorempixel.com/output/nature-q-c-205-154-2.jpg"/>
<img src="http://lorempixel.com/output/nature-q-c-205-154-3.jpg"/>
<img src="http://lorempixel.com/output/nature-q-c-205-154-4.jpg"/>
<img src="http://lorempixel.com/output/nature-q-c-205-154-5.jpg"/>
<img src="http://lorempixel.com/output/nature-q-c-205-154-6.jpg"/>
<img src="http://lorempixel.com/output/nature-q-c-205-154-7.jpg"/>
<img src="http://lorempixel.com/output/nature-q-c-205-154-8.jpg"/>
<img src="http://lorempixel.com/output/nature-q-c-205-154-9.jpg"/>
<img src="http://lorempixel.com/output/nature-q-c-205-154-1.jpg"/>
<img src="http://lorempixel.com/output/nature-q-c-205-154-2.jpg"/>
</div>
</div>
</div>
</body>
</html>
oh and forgive me this dumb question, up to now this forum was a big help, but now I lost.
thanks in advance.
I got a Solution Thanks everbody, you made my brain work :) And helped me to see the solution I changed the width of the view class
.view
{
/*width:100%;*/ /*this resizes but nested in divs */
/*with display:table; it breaks them*/
width:800px; /*with a fixed width it works very nice*/
max-width: 75%; /*lets the gallery shrink on resize of the browser*/
white-space: nowrap;
overflow-x: auto;
margin: 0 auto;
text-align: left;
}
So I got my vertically centered structure that I can keep on other pages, and use it for my gallery. It even resizes (to a certaine extend) if you resize your browser window and looks still good. Have a nice day :)