my div are positioning different in different browser [closed]

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.

Closed 8 years ago.

Improve this question

Am making changes on a home page. i have background images and links to the image as buttons.

However when creating divs for each image i found out that the best way was to add div for each image as that will allow me to position the images side by side. i was told to use a class, however with class i would not able to put images side by side.:

this is my finished page as you can see the 7 images on the middle of the screen.

however if you open this in Firefox it comes out all messy :/

what is the best solution for this to have it positioned like the link i provided. but in all browsers. is divs the best way?

This is my js fiddle with the code: http://jsfiddle.net/uJhvk/

e.g

 <div id="testimage">
  <div id="a1"><a href="">Awards</a></div>
 </div>

any help will be grateful.

Answer 1

http://jsfiddle.net/ahallicks/uJhvk/1/

I've added floats to #testimage2-6 and margins to the last two to space them out

float: left;clear: both;

on #testimage2 to make it sit on a new line