I need to add one pixel to the parent div

Question

I have one div for the “classroom” that contains a div for each “student”. 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 “student” divs on 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%; } 

To ensure that students have enough space in the classroom div, I use jQuery to 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 goes to the next line (as if there was no float: left; ). The stranger thing is that when the width of the div in the "Classroom" class is increased by 1 pixel, the div returns to this position at the end of the first line. I made these jsfiddles: Here http://jsfiddle.net/U3gBG you can see this problem. Click on the results pane and use the arrow keys to scroll down and right.
Here http://jsfiddle.net/U3gBG/1/ you can see the result of adding 1 to the width of the div "classroom" after calculation (the width of the "class" is equal to the sum of the "students" width plus 1 pixel). This result is what I need.
I do not understand why I need to increase the width of the parent div by 1? Why summarize the entire width of child divs?

Answer 1

So, based on Eyal's comment, I was curious what was happening at the root of this problem. On my system, I noticed that Chrome is wrapped, but IE and FF did not. After more digging, I found that the wrapper was caused by the display area of ​​the screen.

You determine the size of the parent using jQuery, but when dividing by three you are going to round. In some cases, rounding causes the container to be too narrow for images and third wrappers. If it is rounded, then you have enough space and the wrap does not occur.

The solution posted below is a more robust answer as it automatically recounts the size of the browser. You will have to run js all the time and keep track of resizing to handle this with JS. Hope this helps.

---

Instead of using javascript, can you use CSS instead?

Set student to display:inline . Then set parent to white-space:nowrap . They will not turn around. Then you need to handle the spaces between the images. Since we have now set them to inline , any spaces in the html will cause a space. Therefore, if you set "font-size: 0px" in the image container, it resets the space. Remember to set the font to a positive value if the containers should contain text. No need to mess with js.

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

Answer 2

when I look at this in IE9 under the debug screen, I checked your div element and image elements and it seems that the width of the first image is 999.95 and not the round number, so the other two images have a non-integer width value.

it looks like some browsers will round this number, and some will round it, so you can use css as suggested in another answer, or just add a +1 pixel as you do OR you can use the parseint () function or some rounding function to make sure your images have enough space in the parent div.

EDIT:

I think the problem is with the css height: 100% value, this means that the width is calculated and not fixed at the actual size of the image, therefore, not an integer value for the width in pixels, so in order to continue using this image placement method you will have to use math.ceil() or something like that when summing the total width of the parent div.

Answer 3

divide them into 3 classes instead of going through the chain the way you have them. Instead of

 .classroom { white-space: nowrap; height: 100%; } .classroom .student { height: 100%; display: inline-block; float: left; } .classroom .student .student-image { height: 100%; }​ 

just do them

 .classroom { white-space: nowrap; height: 100%; } .student { height: 100%; display: inline-block; float: left; } .student-image { height: 100%; }​ 

so that you define each one of them ... now, how much of a problem are you getting because you are not specific enough in your CSS with the way you want, you have the width or height set, you only have the float set to te student element, so it’s easy for you to do weird things. 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 specifications that I gave will be large enough for your photos, but just to show you how you should try to gain control over them ... and pay attention to the specifications that I gave for the width. the class has a width of 308 pixels, then the student has a width of 100 pixels with a left edge of 2 pixels, so 3 student frames per 100 pixels wide with 2 pixels in each image up to a width of 306 pixels, leaving 2 pixels to the right of the last frame of the student, so it all adds up. Count it before you need it and taking into account the fields. Hope this helps ... :)

Answer 4

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 image size