I need to add one pixel to parent div

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?

have you tried looking at this in multiple browsers? maybe its a specific browser issue? — Eyal Alsheich, Dec 01 '12 at 02:29
@EyalAlsheich: I am using the most updated firefox and I need it to work with it. — Naor, Dec 01 '12 at 02:33
try looking in the layout tab in firebug to see if you can find a 1 pixel element though from watching your code this problem does seem very strange. i tried looking at it in fiddle but the images are too big andi cant scroll it, please try it with smaller images so i can see the issue — Eyal Alsheich, Dec 01 '12 at 02:38
i think i figured it out, i updated my answer this was a good question. — Eyal Alsheich, Dec 01 '12 at 03:16

mrtsherman · Accepted Answer · 2012-12-03T00:05:32.393

0

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%;
}

edited Dec 03 '12 at 00:05

answered Dec 01 '12 at 02:40

mrtsherman

39,342
23
87
111

while this may fix the issue i am still very curious as to why this issue is happening – Eyal Alsheich Dec 01 '12 at 02:43
@EyalAlsheich - I see inconsistent browser behavior. In Chrome, both sample fiddles wrap. In Firefox and IE9 neither wrap. Actually after some more inspecting I think I might know what is going on. I'll update my answer. – mrtsherman Dec 01 '12 at 02:52
1

@mrtsherman: I wish I could solve this with css only, but I think this is not solving the problem. The images are partially displayed as you increase the size of the window. – Naor Dec 01 '12 at 15:36
@Naor - Yes I see that now. How about changing `student` to inline then? http://jsfiddle.net/U3gBG/7/ – mrtsherman Dec 01 '12 at 18:37
@mrtsherman: Looks nice. How can I get rid of the spaces between the images? There is no margin and no padding. What is responsible for them? – Naor Dec 01 '12 at 22:32
That is because of the whitespace in your html being treated as actual spaces (remember we switched them to inline). There are several solutions posted in this SO question - http://stackoverflow.com/questions/2628050/ignore-whitespace-in-html. I think the `font-size: 0` trick is best - http://jsfiddle.net/U3gBG/8/ – mrtsherman Dec 02 '12 at 19:36

Eyal Alsheich · Answer 2 · 2012-12-01T03:12:58.607

when i look at this in IE9 under the debugging screen i inspected your div element and image elements and it seems the width of the first image is 999.95 and NOT a round number so are the other two images each having a non integer width value.

it apears to be that some browsers will round this number up and some will round it down, so you can either use css like suggested in the other answer or you can simply add the +1 pixel like you are doing OR you can use parseint() function or some sort of round up function to make sure your images will have enough room in the parent div.

EDIT:

i think the issue stems from the css value of height: 100% , this menas that the width is calculated and not fixed to the actual image size, hence the non integer value for width in pixels, so in order to keep using this method of placing images you will have to use math.ceil() or something of that nature when adding up the total width of the parent div.

Math.ceil will not work since each student width is an integer. Whenever I do w += $(this).width(), $(this).width() returns an integer and not "double type" number. — Naor, Dec 01 '12 at 15:46

score 0 · Answer 3 · answered Dec 01 '12 at 06:21

split them up into 3 classes instead of having them go through a chain the way you have them. Instead of having

.classroom {
    white-space: nowrap;
    height: 100%;
}

.classroom .student {
    height: 100%;
    display: inline-block;
    float: left;
}

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

just make them

.classroom {
    white-space: nowrap;
    height: 100%;
}

.student {
    height: 100%;
    display: inline-block;
    float: left;
}

.student-image {
    height: 100%;
}

so you have each one defined.... now as far as the problem you're getting, that's because you're not being specific enough in your CSS with how you want things to be, you have now width or height set, you only have floats set to te student element, so it's easy for it to do weird stuff. Try something like..

.classroom {
    width:308px;
    height:100px;
    float:left;
    margin-left:0px;
}

.student {
    height:100px;
    width:100px;
    margin-left:2px;
    float: left;
}

.student-image {
    height: 100px;
    width:100px;
    float:left;
}

idk if the exact specs I gave would be big enough for your pics, but just to show you how you should try getting some control over them... and notice the specs I gave for the width. the classroom is 308 pixels wide, then student is 100 pixels wide with a left margin of 2 pixels, so the 3 student frames each 100 pixels wide with 2 pixels margin on each totals up to a width of 306 pixels, leaving 2 pixels to the right of the last student frame, so it all adds up.. calculate it out to however wide you need it and considering the margins. Hope this helps... :)

Removing chaining does not affect the rendered CSS at all. It also has absolutely nothing to do with OP's question. Why tell him to remove it? Sorry, but your answer doesn't even make sense. You are floating the classroom container which shouldn't be floated in the first place. Floating the images accomplishes nothing. You should rethink this answer. — mrtsherman, Dec 01 '12 at 06:42

score -1 · Answer 4 · answered Dec 01 '12 at 03:17

-1

u can use ul li

    <ul style="float:left; List-style:none;">
<li><img  src="http://dnqgz544uhbo8.cloudfront.net/_/fp/img/home/f.AmzRdUdc4pEtCuGvU03WXQ.jpg"></li>
<li> <img src="http://dnqgz544uhbo8.cloudfront.net/_/fp/img/home/k.jXX55KhHUWZGTAb-GpPkdg.jpg"></li>
 <li>   <img  src="http://dnqgz544uhbo8.cloudfront.net/_/fp/img/home/c.ZKQXc2Kc8-po-OK6AhDbtw.jpg"></li>
    </ul>

and Fix your image size

answered Dec 01 '12 at 03:17

Pawan Lakhara

1,146
4
16
28

while your suggestion will work perfectly and show the images it is not what this question is about – Eyal Alsheich Dec 01 '12 at 03:21

I need to add one pixel to parent div

4 Answers4

Linked