html - CSS, floating boxes are bumping each other -

html - CSS, floating boxes are bumping each other -

i noob, code pretty simple:

.pictureboxwrapper1 { width: 225px; /* background: silver; */ margin: 0 auto; padding:7px; float:left; border:dotted; margin-right:10px; }

unfortunately still giving me unexpected results this:

as can see have 2 of boxes on left "bumping" each other.

is there way can create box not expand no matter text/images in it?

update: pastebin entire css file http://pastebin.com/tp1ws4r3

this happening because images of more size. can seek restricting image size either 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>

html css