How to horizontally scroll an inner div with text wrapping


Tags: css,html,scroll

Problem :

I am trying to get a series of inner divs to scroll horizontally inside a fixed width outer div. I have it working but the only problem is the text in the inner div does not wrap and overflows the next div, because of the white-space:nowrap in the outer div, which accomplishes the scroll. How can I fix this so the inner divs continue to scroll rightward, but the text fits into the inner divs (red boxes)? Please have a look at this JSFiddle for the code:

Demo in Jsfiddle

HTML:

<div id="content">
    <div id="contentHolder">
        <div class="post">lorem ipsum dolor sit amet</div>
        <div class="post">lorem ipsum dolor sit amet</div>
        <div class="post">lorem ipsum dolor sit amet</div>
        <div class="post">lorem ipsum dolor sit amet</div>
        <div class="post">lorem ipsum dolor sit amet</div>
        <div class="post">lorem ipsum dolor sit amet</div>
        <div class="post">lorem ipsum dolor sit amet</div>
        <div class="post">lorem ipsum dolor sit amet</div>
        <div class="post">lorem ipsum dolor sit amet</div>
        <div class="post">lorem ipsum dolor sit amet</div>
        <div class="post">lorem ipsum dolor sit amet</div>
        <div class="post">lorem ipsum dolor sit amet</div>
        <div class="post">lorem ipsum dolor sit amet</div>
        <div class="post">lorem ipsum dolor sit amet</div>
        <div class="post">lorem ipsum dolor sit amet</div>
        <div class="post">lorem ipsum dolor sit amet</div>
        <div class="post">lorem ipsum dolor sit amet</div>
        <div class="post">lorem ipsum dolor sit amet</div>        
    </div>
</div>

CSS:

#content {
    margin:0px auto;
    background-color:#515151;
    width:600px;
    border-radius:5px;
    padding-top:20px; 
}   

#contentHolder {
    color:#fff;
    margin:0 auto;
    width:500px;
    height: 400px;
    background-color:#000000;
    border-radius:10px;
    overflow:auto; 
    white-space:nowrap;
}


.post {
    width:60px;
    height:300px;
    margin:10px;
    display:inline-block;
    font-size:12px;

    background-color:#700;
}


Solution :

Apply white-space: normal; to .post


    CSS Howto..

    How to make div inside table same size as text inside a?

    Why does the dropdownlist show under the div

    Yii2 how to include multiple css files from specific view or controller action

    How do I modify this script to use different colors?

    How to make divs re-arrange when another div is positioned between existing?

    How Do I Place An Image To The Right of a Body of Text?

    How to create a pure css slideshow? [closed]

    Javascript: How to highlight some numbers or text within a line or paragraph?

    How can I select my font awesome icons in CSS?

    How to @import without including all CSS but just the @extends ones

    How to add css to my page via Git Hub raw?

    Overflow-x and overflow-y properties, how should they work? [duplicate]

    Not floating on same line, how to fix css

    how to create a tirangle and square with ccs only?

    How to make text wrap above and below a div?

    How to use images in CSS that is used from Jade files rendered via Node.js

    Animate Chartist on show

    Using html5 canvas as a background, how to position a youtube embed on top of it using css to be resolution independent?

    How do a Add scroll bar with fixed header

    How to provide CSS properties for Different browsers like Mozilla and Chrome

    How to turn off element CSS background when dragged

    How do i apply Table Header color to Table body using JQuery

    How to make a image stay at the bottom but not rise up

    How can I create DIV “rows” while having a DIV float beside them?

    Floating of Divs not exact. How to arrange them the right way?

    how to make website more user friendly for mobile users [closed]

    Extjs: how Element's up/down functions work?

    Show unordered list's bullet points when display:table

    How to float

    to bottom of a

    when you can't use position:relative and position:absolute

    How to change css on multiple elements