CODEWITHSUNDEEP
htmlcsscss-floatimagemapmadcap
Jaynee
Jaynee

Reputation: 11

CSS float breaking HTML image map

I am using an XML editor called Madcap Flare that allows me to create image maps using a GUI. Since that makes the maps easily editable, I would rather use that technique. Unfortunately, the code it renders is not a CSS image map, but an HTML one (map, area, etc.). I do not want to switch to a CSS image map, because I want to do easy editing in the GUI.

I want my image map to align right with text to the left of it. I have tried the following techniques with the indicated results:

Technique 1: I floated the div containing the image right with CSS. Result: The image map no longer works, but the image floats right and the text wraps.

Technique 2: I floated the image right with CSS. Result: The image floats right, but the div remains on the left. The text does not wrap and the image map no longer works.

Technique 3: I set the div align="right" and removed the CSS completely. Result: The image floats right and the image map works, but the text no longer wraps.

I've noticed the image map only breaks when I float the image or its container; I even floated left to experiment and saw the same results. Is there no way to float an image map? I wondered if the issue were an image resizing issue, but I inspected the code and the image map is no inheriting any image size styles. I also set the image to max-width and max-height 100% in my tests to make sure it wasn't shrinking at all, but I saw the same results again. I also think that the HTML align=right experiment indicated that the problem was not an inherited style.

Any tips/tricks? Or any confirmation that you cannot float an image map? Thanks.

Upvotes: 1

Views: 671

Answers (1)

Johannes
Johannes

Reputation: 67748

If the div containing the image map has a fixed size and is at the upper border of its parent DIV, you could do the following:

Create an empty DIV with the same size as the one containing the image map and make that float right (at the top). No border, no background, no contents. The text will float around that one.

Apply position: relative to the parent DIV and position: absolute to the div containing the image map. Apply top: 0;, right: 0 and the width and height as the empty floated DIV.

This places the image map above the empty floated DIV and the text floats around it.

Upvotes: 1

Related Questions