Question

I have one div for “classroom” that contains div for each “students”. Each “student” div contains an image. Here is the HTML:

<div class="classroom">
    <div class="student">
        <img class="student-image" src="http://dnqgz544uhbo8.cloudfront.net/_/fp/img/home/f.AmzRdUdc4pEtCuGvU03WXQ.jpg">
    </div>

    <div class="student">
        <img class="student-image" src="http://dnqgz544uhbo8.cloudfront.net/_/fp/img/home/k.jXX55KhHUWZGTAb-GpPkdg.jpg">
    </div>

    <div class="student">
        <img class="student-image" src="http://dnqgz544uhbo8.cloudfront.net/_/fp/img/home/c.ZKQXc2Kc8-po-OK6AhDbtw.jpg">
    </div>
</div>

I want to display all the “students” divs in one line so I use the following css:

body {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

html, body {
    height: 100%;
}

.classroom {
    position: relative;
    height: 100%;
}

.classroom .student {
    position: relative;
    height: 100%;
    float: left;
}

.classroom .student .student-image {
    height: 100%;
}

In order the students will have enough place in the “classroom” div, I use jQuery in order the calculate the width of the “classroom”:

$(document).ready(function() {
    var w = 0;
    $(".student").each(function() {
        w += $(this).width();
    });
    $(".classroom").width(w);
});

Unfortunately the result is not what I expected. The last “student” div is going down to the next line (as if no float: left; was assigned). More weird is that when increasing the width of “Classroom” div in 1 pixel, the div returns to it position at the end of the first line.
I made those jsfiddles:
Here http://jsfiddle.net/U3gBG you can see the problem. click on the result panel and use the arrows keys in order to scroll down and right.
Here http://jsfiddle.net/U3gBG/1/ you can see the result of adding 1 to the width of the “classroom” div after calculation (the width of “classroom” equals to the sum of “students” width plus 1 pixel). This result is what I need.
I don’t understand why do I need to increase the width of the parent div by 1? Why sum all the child divs width is not enough?

Answer 1

So based on Eyal’s comment I became curious about what is going on at the root of this problem. On my system I noticed that Chrome wrapped, but IE and FF did not. After more digging I discovered that the wrapping was due to the rendered screen area.

You are sizing the parent using jQuery, but when dividing by three you are going to get rounding. In some cases a round down causes the container to be too narrow for the images and the third wraps. If it rounds up then you have enough room and no wrapping occurs.

The solution I posted below is a more robust answer because it automatically recalculates on browser resize. You’d have to run your js constantly and monitor resize events to handle this with JS. Hope that helps.

---

Instead of using javascript can you use CSS instead?

Set student to display:inline. Then set parent to white-space:nowrap. They won’t wrap. Next you have to handle the whitespace between the images. As we have now set them to inline any whitespace in the html causes a gap. So if you set `font-size: 0px’ on the image container it collapses the gap. Remember to set the font back to a positive amount if the containers need to contain text. No messing with js required.

http://jsfiddle.net/U3gBG/8/

body {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

html, body {
    height: 100%;
}


.classroom {
    white-space: nowrap;
    height: 100%;
    font-size: 0px;
}

.classroom .student {
    height: 100%;
    display: inline;
}

.classroom .student .student-image {
    height: 100%;
}​