How do i make divs go into another row when full?

Question

My code is something like the below. When theres 3 images everything is fine once theres 4 it gets full and moves the entire div.top into another row. How do i make the div inside top just start a new row instead?

I tried writing .top width=500px but once it hits or passes it instead the images inside are squeeze together instead of each being 150x150. I tried max-width on top instead and in opera and chrome i see the border of top as 500width but the images continue to render pass it. (i have a firefox problem with my div so the width looks fixed to something else).

So how do i make these divs go into another row? and not try to squeeze together

<div class="top">
<div><a href><img/></a></div>
<div><a href><img/></a></div>
<div><a href><img/></a></div>
</div>

Answer 1

I may need more information here, it's hard tell exactly what's happening. A screen-shot perhaps?

I would probably start with something like this:

.top {
  width: 500px;
  overflow: hidden;
}

.top div {
  display: inline;
  float: left;
  width: 150px;
  height: 150px;
}

Answer 2

Here's a solution that might help (used it in my example, just customized to fit your example)

.top {
  display: block;
  padding: 0;
  margin: 0;
  width: 100%;
}

.top div {
    float: left;
    display: block;
    margin-right: 5px;
    margin-bottom: 10px;
    width: 47%;    /* Not needed, but in my case I needed 2 columns */      
}

Basicall, the .top div float: left; is what is making my images to go to next row if columns are full.