CODEWITHSUNDEEP
htmlcss
Suzi Larsen
Suzi Larsen

Reputation: 1490

How to keep content within a container that has no-wrap css applied to it

I am having to force a horizontal scroll within one section of my content, so I applied to the whitespace: no-wrap css to the container box. So I have managed to get the content to be forced off the screen and create a horizontal scroll but now I have the problem of the content spilling out of the container box (as the container box stops at 100% window width).

http://s285756995.websitehome.co.uk/offline/

This is the site I am working on.

<div style="white-space:nowrap">
                <div class="moo">
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>

                    <div class="fader-empty active-cell tape">
                        <p class="rotate">I am some text</p>
                        <div class="fader-icons fs-iso"></div>
                        <div class="fader-icons fs-slave"></div>
                    </div>


                    <div class="fader-empty active-cell">
                        <p class="rotate">I am some text</p>
                    </div>
                    <div class="fader-empty active-cell">
                        <p class="rotate">I am some text</p>
                    </div>
                    <div class="fader-empty active-cell">
                        <p class="rotate">I am some text</p>
                    </div>
                    <div class="fader-empty active-cell tape">
                        <p class="rotate">I am some text</p>
                    </div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>

                    <div class="clearfix"></div>

                    </div><!--end of moo-->

                </div><!--end of stupid wrap style-->

CSS:

.moo { 
background:#f1f1f1;
padding:10px 10px 10px 15px;
margin-bottom:10px;
margin-top:10px;



.fader-empty {
background:#e5e7ea;
border:1px solid #a1a1a1;
min-height:292px;
width:43px;
display:inline-block;
margin-left:-5px;
position:relative;
overflow:hidden;

I know that float or inline-block will essentially "bring it off" the page so there is nothing to push the container out, so that is why I tried clear both but I feel this is not right?

Unless there is a better way to achieve the horizontal scroll than no-wrap. Also I cannot put a fixed width on .moo because the number of little boxes would change

Upvotes: 0

Views: 742

Answers (3)

Suzi Larsen
Suzi Larsen

Reputation: 1490

I think I have found a solution whilst messing around.

I put a float and clear on the moo and it seems to have done the trick and is now wrapping round the content. I didn't think this would work for some reason but it seems to have done:

.moo { 
background:#f1f1f1;
padding:10px 10px 10px 15px;
margin-bottom:10px;
margin-top:10px;
white-space:nowrap;
float:left;
clear:both;
}

I still can't quite get my head around why this has worked

Upvotes: 1

LcSalazar
LcSalazar

Reputation: 16841

The only way I can see to fix your "background" issue, is to make your .moo class a position:absolute. Then its width wouldn't be limited by the parent's overflow.

But that would require you to set the .fader-setup-drag-area element (parent) as position: relative and give it a fixed height. Like this:

.fader-setup-drag-area {
    overflow: auto;
    padding-left: 80px;
    position: relative;
    height: 360px;
}

.moo {
    background: #f1f1f1;
    padding: 10px 10px 10px 15px;
    margin-bottom: 10px;
    margin-top: 10px;
    position: absolute;
}



EDIT

There may be a better approach! You can use the techniques of display: table; and display: table-cell to set your elements in line, without using float or nowrap.

I've created a fiddle, with a scenario similar to yours. http://jsfiddle.net/A7Fkd/1/

Upvotes: 0

Starscream1984
Starscream1984

Reputation: 3062

I would suggest adding: 

overflow-x: auto

to your .moo styles

This will make the moo container have it's own scrollbar - if this is what you want?

Upvotes: 0

Related Questions