CODEWITHSUNDEEP
javascripthtmlcss
Perpetualcoder
Perpetualcoder

Reputation: 13571

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

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

|Static Div|Content Div0|Content Div1|...|Content DivN|Static Div|

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:

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

I am struggling with the following issues:

  1. 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.

Upvotes: 1

Views: 404

Answers (1)

Alejandro Garc&#237;a Iglesias
Alejandro Garc&#237;a Iglesias

Reputation: 16412

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:

  1. Make "float: left" the three parts, #static_div_1, #static_div_2 and the #content divs (and optionally set a fixed width to them).
  2. The "overflow-x: scroll" style on the #content div.
  3. The "white-space: nowrap" to the #content div.
  4. 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;
  }

Upvotes: 3

Related Questions