Ryan Ryan - 1 year ago 64
CSS Question

CSS, floating boxes are bumping each other

I am a noob, so my code is pretty simple:

.pictureBoxWrapper1 {
width: 225px;
/* background: silver; */
margin: 0 auto;


Unfortunately it is still giving me some unexpected results like this:

enter image description here

as you can see I have two of the boxes on the left that are "bumping" into each other.

Is there some way that I can make my box not expand no matter what text/images are in it?

Pastebin for entire CSS file

Answer Source

This is happening because your images are of more size. You can try restricting the image size either by using style in image tag,

<img style="height:auto; width:auto; max-width:300px; max-height:300px;" src="...">

or through css

#bg {
  position: fixed; 
  top: 0; 
  left: 0; 

  /* Preserve aspet ratio */
  max-width: 100%;
  max-height: 200px;


<div id="bg">
  <img src="..." alt="">