Ryan Ryan - 3 months ago 8
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;
padding:7px;
float:left;
border:dotted;
margin-right:10px;

}


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?

UPDATE:
Pastebin for entire CSS file
http://pastebin.com/tp1WS4r3

Answer

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

HTML

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