How to make a horizontally scrolling page with an unknown number of sections?

What you can do is to use JS to "resize" a container. Here's a short example.

Up vote 0 down vote favorite 1 share g+ share fb share tw.

I have a web page that contains a few s that should be laid out horizontally. All are 85% of the screen width, with an automatic margin both sides. The problem is that the sections seem to ignore float:left for some reason.

I also don't want to set a fixed width on the body, as the same CSS will be used on many pages. Is there a way that this can be done? Here's a jsbin of the code.

I also tried this with display:box. Html css scrolling horizontal link|improve this question edited Mar 1 at 5:39BoltClock's a Unicorn?101k14145376 asked Feb 24 at 6:43adam64911 80% accept rate.

What you can do is to use JS to "resize" a container. Here's a short example: what you do is float:left all the sections (additionally add overflow:hidden;zoom:1 for the container for wrapping). Pretty easy.

However, they are constrained by the width of the container (or if it's directly the children of the body, they are constrained by the html body). From here, you use JS to do the trick. I prefer jQuery (but people may criticize for not using pure JS so I will only describe the procedure).

What you do is to get the "outer width" of the sections (that is the width, including padding, border AND margins), multiply by how many sections you have, and then apply this to the direct parent/container (or whatever parent that is constraining your horizontal items). The effect is that the parent of your sections will have an explicit width, that will force the browser to make it fit, thus be scrollable horizontally. Also, make the container fit the sections as well.

These methods are currently done by JS "sliders" which have a specified width for the the outer container (like 900px) but have an inner container which has like 3 sections (2700px). This, with added overflow:scroll to the outer container makes everything in it "horizontally scrollable.

While I don't really want to use JS so it gracefully degrades without it enabled, I guess it's the only way. Thanks for your answer :) – adam Mar 1 at 9:03.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.