Question

I have a page that has no vertical scroll, rather, everything is displayed horizontally.

if you scroll all the way to the end of my page (all the way to the right) you will see my contact info.
For example:

<div1></div1>
<div2></div2>
<div3></div3>
<divN></divN>

In this case, div1 is the most left item, with div2 in the center div3 to the right of it… and all the way at the end, divN is displayed.
every div is 500 px wide.
I can set my page width to 20000px ( for 4 divs ) and that works great.
However, I wanna make my page dynamic and each div, other than divN is loaded from a database. This means, each time I add content, I have to manually increase my page width.

Is there a way to automate this process.

Answer 1

As per i understand may be that’s you want this:

.parent{
    overflow:hidden;
    white-space:nowrap;
}

.parent > div{
    width:500px;
    height:300px;
    border:1px solid red;
    display:inline-block;
    *display:inline;/*For IE7*/
    *zoom:1;
    white-space:normal;
}

Check this http://jsfiddle.net/HJsrJ/