white-space:nowrap breaks display:table

StackOverflow https://stackoverflow.com/questions/12392396

Question

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.

Was it helpful?

Solution

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 :)

OTHER TIPS

Add line-height: 0; to your #view styles. This will remove that extra little bit of space below the img within your #view div. Also, there are a few things I removed which you didn't need and I took out your display: table;. In most case, you shouldn't use that display style. Take a look at this fiddle and let me know if this works for you.

More simple just add at your container :

table-layout: fixed;

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top