Box-sizing not correct on right side

HTML-CSS
1

I clearly do not understand the ‘box-sizing’ I can’t get the right side of the boxes in my image gallery to fit like the left and top do. I have tried fiddling with padding , but it makes no difference.
[https://codepen.io/posweyb/pen/ZYEoQYB](https://My example in Code Pen)

2

Hi @posweyb

The height of the container is dependent on the size of the img.
As a quick fix you could set a height for the image container in pixels.

Happy coding

3

Not that it has anything to do with the problem you are referring to, but you haven’t actually applied box-sizing because you wrapped the selector inside a pair of {}

{
  * {
  box-sizing: border-box;
 
  }
}

It should be:

* {
  box-sizing: border-box;
}

Use flexbox or grid and not floats for the layout. The fCC curriculum teaches both.

4

@lasjorg Thank you for pointing that out!

5

@Teller, how does setting the image height fix the width problem? Why does that work? ( I tried it in several places in the css and am not getting any change?)

6

It was suggested as a quick fix.

I didn’t see an image gallery, just two images side by side.

As @lasjorg suggested, you may want to use grid to create a two dimensional layout.

Have you done the Box Model lecture in the Full Stack Developer CSS module?

Happy coding

7

Thank you, I will try the lecture!

1 Like