The CSS and scripting to achieve multiple divs in sizeable divs in a scrollable div

Question

Perhaps the most unusual question title today!

I'm trying to achieve something on my site which I'm having an incredible amount of difficulty, and hoping someone can either show me the error of my ways or advise if I'm handling this totally the wrong way.

Consider the following:

1-----------------------------------------------------------------------+
|2--------+ 3---------------------+ 4-------------+                     |
||        | |                     | |             |                     |
|| a-+    | | b-+ c-+ d-+ e-+ f-+ | | g-+ h-+ i-+ |                     |
|| | |    | | | | | | | | | | | | | | | | | | | | |                     |
|| +-+    | | +-+ +-+ +-+ +-+ +-+ | | +-+ +-+ +-+ |                     |
||        | |                     | |             |                     |
|+--------+ +---------------------+ +-------------+                     |
+-----------------------------------------------------------------------+

|<--------------- SCREEN WIDTH --------------->|

Here's what I'm trying to achieve based on the numbers and letters relating to the layout I want:

1= One 'container' which is of fixed height and NO WIDER than the screen width (give or take margins etc so it fits in the centre of the screen).

This 'container' also needs a scroll bar, horizontal ONLY, so that the user can scroll it's contents.

Within this container are 3 other containers, labelled 2, 3 and 4. These will vary in size, but NEVER contain scrollbars, but each container, as it grows, needs to remain in container 1 and NEVER scroll vertically.

Within 2, 3 and 4, additional containers (widgets) can be inserted thus making it's parent container grow.

As you can see in my layout, container 2 has 'widget' a, container 3 has widgets b, c, d, e and f and container 4 has widgets g, h and i.

The jQuery/Javascript to add everything I've managed no problems, but the actual CSS and 'layout' I'm having problems with.

I've made container 1 have 'white-space:nowrap;' so this obliterates the vertical scrolling, and using jQuery similar to $('#containerA').append([something]); also adds the 'widgets' to the respective containers (2, 3 or 4).

At present, my HTML is as follows:

                    <div id="divfieldWidgets" style="width:auto;margin-top:40px;background-color:#FFFFFF;border:1px solid gray;height:320px;left:50px;right:50px;-moz-box-shadow: 4px 4px 2px #888;-webkit-box-shadow: 4px 4px 2px #888;box-shadow: 4px 4px 2px #888;overflow:hidden;margin-left:60px;margin-right:60px;overflow:scroll;">
                    <div style="white-space:nowrap;float:left;">
                        <div id="divFieldWidgetsProductAndMarketing" style="background-color:#FFEEEE;height:100%;width:auto;white-space:nowrap"></div>
                        <div id="divFieldWidgetsYears" style="background-color:#EEFFEE;height:100%;width:auto;white-space:nowrap"></div>
                        <div id="divFieldWidgetsCalculations" style="background-color:#EEEEFF;height:100%;"></div>
                    </div>
                </div>

Which achieves what I want in some parts (i.e. the horizontal scrolling only of the MAIN container and the sizing of containers 2, 3 and 4 when 'widgets' are adding), but as you can see, not all together.

Would REALLY appreciate some help with this.

TIA

Excuse me? No it doesn't work, hence why I asked the question. — JasonMHirst, Mar 13 '13 at 11:52

score 1 · Accepted Answer · edited May 23 '17 at 10:25

If you want your float:left divs to grow horizontally and avoid vertical scroll, you will need to wrap your divs inside a bigger div with fixed horizontal width i.e.

you can come close to what you want to achieve through these steps:

make your container 1 with a very high width. you can do this by statically specifying a width or calculating width of inner divs and assigning it to it through javascript
Now, your inner divs i.e. 2,3,4 are going to be of width:auto and float:left, (4 can be float:right as well)
Now again, your inner divs are going to have divs which you want to be horizontally aligned,i.e. b,c, d,e,f in container 3: you want them to be horizontally aligned, hence you will have to give 3 a static width, and these b,c,d,e,f a width:auto
Now since you don't know what width you should give to your 2,3 and 4, you will have to calculate the width of individual divs inside each of them through javascript and assign the sum to them. i.e.

width(3) = width(b) + width(c) + width(d) + width(e) + 30px = (a little extra thn actual sum of content divs)

so, the basic point is, for horizontal alignment and no vertical scroll, the parent container should have fixed width.

now see this fiddle, I've already provided static width to the containers. you have get that through a javascript code.

also, have a look at overflow property. go through this and this

Yes, I see what you're saying, and it does make sense. I was hoping of not having to dynamically change the width but rather rely on CSS to perform this for me, BUT, you're explanation makes total sense and I really don't think it's much effort in me 'adding-up' the width of the widgets, applying this to the respective container width and that to the overall container. Thanks for this, appreciated. — JasonMHirst, Mar 13 '13 at 13:05

score -2 · Answer 2 · answered Mar 13 '13 at 12:06

-2

I'm thinking the parent div should be 100%, the child div should float left. keep the overflow scroll horizontal, but don't allow vertical scrolling.

answered Mar 13 '13 at 12:06

artcase

304
1
7

score -2 · Answer 3 · answered Mar 13 '13 at 15:39

If I understand your desired behavior correctly, you can do this without setting static widths and retain your desire for horizontal scrolling.

http://codepen.io/cimmanon/pen/HCKEx

#divfieldWidgets {
  max-width: 100%; /* modified */
  margin-top:40px;
  background-color:#FFFFFF;
  border:1px solid gray;
  height:320px;
  -moz-box-shadow: 4px 4px 2px #888;
  -webkit-box-shadow: 4px 4px 2px #888;
  box-shadow: 4px 4px 2px #888;
  overflow:hidden;
  margin-left:60px;
  margin-right:60px;
  overflow-x:scroll; /* modified */
}

.grouper {
  display: table-cell;
}

.grouper div {
  display: table-cell;
}

#divFieldWidgetsProductAndMarketing {
  background-color:#FFEEEE;
}

#divFieldWidgetsYears {
  background-color:#EEFFEE;
}

#divFieldWidgetsCalculations {
  background-color:#EEEEFF;
}

The HTML:

<div id="divfieldWidgets">
    <div class="grouper"><!-- added a class here -->
        <div id="divFieldWidgetsProductAndMarketing">a</div>
        <div id="divFieldWidgetsYears">b</div>
        <div id="divFieldWidgetsCalculations">c</div>
    </div>

  <div class="grouper">
    <div>a</div>
    <div>b</div>
    <div>c</div>
    <div>d</div>
    <div>e</div>
  </div>
</div>

The key is using display: table-cell. Your elements are forced to appear all in a row and their parent containers grow to contain them.

The CSS and scripting to achieve multiple divs in sizeable divs in a scrollable div

3 Answers3