Top center an <img> within containing <div> with two L/R float <d

[rupertInAust]

hello all,
does any body have a good reference to ensure a top centered <img> will float above two floated left and right <div>'s when the window resizes smaller? eg;

+----------+ +----------+  +--------+
|          | | <img>    |  |        |
|          | +----------+  |        |
|          |               |        |
| <div>    |               | <div>  |
|          |               |        |
|          |               |        |
|          |               |        |
+----------+               +--------+

         +---------+
         |         |
         +---------+
+--------+         +-------+
|        |         |       |
|        |         |       |
|        |         |       |
|        |         |       |
|        |         |       |
|        |         |       |
|        |         |       |
+--------+         +-------+


    +---------+
    |         |
    +---------+
+-------+ +-------+
|       | |       |
|       | |       |
|       | |       |
|       | |       |
|       | |       |
|       | |       |
|       | |       |
+-------+ +-------+

The reason is that the image floats under and the div's get control. <img>generally goes under not over. Thanks guys!

 

[tsdragon]

Set the z-index of the image to something greater than 1. For example:

<img ... style="z-index:9;">

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[Vragabond]

AFAIK I know, you cannot control that the way you want. Floated elements will just cascade down according to their order in the code, with non-floated elements being the first to cascade.