Question: I'm using the [ImageMap](http://www.mediawiki.org/wiki/Extension%3aImageMap) extension for three images, `a.gif`, `b.gif` and `c.gif` which link to pages `Page 1`, `Page 2` and `Page 3` respectively. So the code to add this to a page is simply:

```
<imagemap>
File:a.gif|50px
default [[Page 1]]
desc none
</imagemap>

<imagemap>
File:b.gif|50px
default [[Page 2]]
desc none
</imagemap>

<imagemap>
File:c.gif|50px
default [[Page 3]]
desc none
</imagemap>

```

However, the images appear in a column (i.e. each on a new line) whereas I want them next to each other. Removing whitespace in the code does not help. This is the most I can reduce it to with it still being valid but the effect is the same:

```
<imagemap>File:a.gif|50px
default [[Page 1]]
desc none</imagemap><imagemap>File:b.gif|50px
default [[Page 2]]
desc none</imagemap><imagemap>File:c.gif|50px
default [[Page 3]]
desc none</imagemap>

```

I have tried using an [image gallery](http://www.mediawiki.org/wiki/Help%3aImages#Optional_gallery_attributes) but this does not work - apparently image galleries are not compatible with image maps.

How can I get these three images in a row with working links?

Answer: 
The ImageMap extension produces HTML code that looks something like this:

```
<div>
  <a href="Page Name">
    <img src="image" />
  </a>
</div>

```

Because the `<div>` element in HTML is displayed as a block element by default, it shows up on it's own line and other divs are pushed down to the next line. There are a couple ways you can get around this. The easiest would be to put your images in a table like this:

```
{| width="100%"
|
<imagemap>
File:a.gif|50px
default [[Page 1]]
desc none
</imagemap>
|
<imagemap>
File:b.gif|50px
default [[Page 2]]
desc none
</imagemap>
|
<imagemap>
File:c.gif|50px
default [[Page 3]]
desc none
</imagemap>
|}

```
To put the images inline, we use a div statement with a css rule inside, like this:

```
<div style="display:inline;">

[[File:image1.jpg]]
[[File:image2.jpg]]

</div>

```

Hope it helps you!