My code is something like the below. When theres 3 images everything is fine once theres 4 it gets full and moves the entire 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>
  • Could you please share the CSS you are using? Mottie about 9 years ago

1 answer


You can do this pretty easily using

 <li><a href><img/></a></li>
 <li><a href><img/></a></li>
 <li><a href><img/></a></li>

And then setting the LI to display:inline (and of course remove all the padding, etc., and remember to set the line-height to something reasonable).

Alternatively you can just use the images themselves without any container or anchor tag and just use the onclick to do whatever your <a/> tag was gonna do.

Answered about 9 years ago by Robusto