Question

I have a web page that contains a few <section>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.

Answer 1

What you can do is to use JS to “resize” a container. here’s a short example:

<div id="container">
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
</div>

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”