HTML and CSS..adding divs side by side n times

Question

I need to build a HTML/CSS layout with the following layout

a scaled down version of my code is like follows:

<div id="container">
  <div id="static_div_1"></div>
    <div id="content">
      <div id="item1"></div>
      <div id="item2"></div>
       ....
      <div id="itemN"></div>
    </div>
  <div id="static_div_2"></div>
</div>

Requirements:

All DIVs need to be stacked next to each other.
I will need to add DIV's in the content DIV dynamically using javascript
The static DIV's need to maintain their position at the beginning and end of the content.
Content DIV should scroll horizontaly

I am struggling with the following issues:

After a point the content div starts wrapping the inserted DIV and another row of DIVs start to be rendered.

Edit: Its not something tabular in nature like plain data. Assume each div is like a form in itself. Something looking like a W2. I just need scrolling in the content DIV. To make the matters worse I am not really a GUI guy.. :(

Any help will be greatly appreciated.

Why are you not expecting this behavior? Once the divs collectively reach a certain width you will experience a wrapping. Are you suggesting the wrap is coming too early or at an unexpected point? — Joel Etherton
– Joel Etherton, Commented Dec 14, 2010 at 22:38
I agree with @AniDev - Stacking Divs side by side is an extremely complicated and tricky maneuver. I struggled with it myself for quite a while not too long ago, and eventually gave up. Your example sounds more like a data display, which is what tables are traditionally used for - even in a CSS-driven page. — morganpdx
– morganpdx, Commented Dec 14, 2010 at 22:38
Updated the question and open to more clarification if necessary. Thanks guys! — Perpetualcoder
– Perpetualcoder, Commented Dec 14, 2010 at 22:49
Its a case of "Business users thinking everything can be like Excel" grrr — Perpetualcoder
– Perpetualcoder, Commented Dec 14, 2010 at 22:51

Alejandro García Iglesias · Accepted Answer · 2010-12-15 01:05:33Z

3

The CSS code you need is this:

#static_div_1, #static_div_2 {
    float: left;
    width: 200px;
  }
  #content {
    float: left;
    overflow-x: scroll;
    white-space: nowrap;
    width: 600px;
  }
  #content .item {
    display: inline-block;
    *display: inline;  /* Target IE6/7 only */
    width: 150px;
    zoom: 1;
  }

Note I have added a class "item" to each of the items inside the #content div to style them. The keys in this layout are:

Make "float: left" the three parts, #static_div_1, #static_div_2 and the #content divs (and optionally set a fixed width to them).
The "overflow-x: scroll" style on the #content div.
The "white-space: nowrap" to the #content div.
Set "display: inline-block" to each item inside the #content div.

You'll notice there is a space between each of the items. This is the newline space, so to avoid it, there must be no newline or space between those item divs.

I hope this results helpful to you. Best regards.

UPDATE: It now works on IE6/7. For correct setting of "display: inline-block" on these browsers notice the addition of the lines:

...
#content .item {
    ...
    *display: inline;  /* Target IE6/7 only */
    ...
    zoom: 1;
  }

edited Dec 15, 2010 at 1:05

answered Dec 14, 2010 at 22:58

Alejandro García Iglesias

16.4k11 gold badges53 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

skajfes Over a year ago

+1 for the example - but does this work in ie? I am not sure how will ie handle display: inline-block and overflow-x?

Alejandro García Iglesias Over a year ago

@skajfes I added a hack to fix "display: inline-block" on IE6/7 (IE8 works fine without it).

Alejandro García Iglesias Over a year ago

@Perpetualcoder: Was this the correct answer? Can you tick the answer as correct?

Perpetualcoder Over a year ago

In IE I am still getting the wrapping behavior for the DIV once it starts overflowing...I am mainly targetting IE7

Perpetualcoder Over a year ago

Eventhough this is not the perfect answer but got me almost close before IE7 started messing with me...thanks!!

Collectives™ on Stack Overflow

HTML and CSS..adding divs side by side n times

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related