CSS for floating image to left of header

Question

If I want to float an image to the left of a heading, the way I typically do it is something this:

<img src="html5_connectivity.svg" width="90" height="90" alt="[HTML5 Connectivity Logo]" class="FloatLeft" />
<h3 data-anchorid="sockets">Connectivity</h3>

Want I want is the same visual effect, float the image to the left of the heading, but have the image tag come after the heading in the document, like this:

<h3 data-anchorid="sockets">Connectivity</h3>
<img src="html5_connectivity.svg" width="90" height="90" alt="[HTML5 Connectivity Logo]" class="FloatLeft" />

I can not figure out what CSS tricks (preferably CSS Level 2.1) will accomplish that. Any suggestions?

Solution 1

You can set margin-left for your header then your image will go till the end and header will be after it.

    <h3 data-anchorid="sockets" style="margin-left: 100px;">Connectivity</h3>
    <img src="html5_connectivity.svg" width="90" height="90" alt="[HTML5 Connectivity Logo]" 
class="FloatLeft" />

Solution 2

I would put a left margin or padding on the h3 and a negative top margin on the img.

Solution 3

If you know the exact dimensions of the image, this will work:

h3.headline {
    padding-left: 90px;
}

img.image {
   position: relative;
   left: 0;
   top: -90px;
   margin-bottom: -90px
}

To clarify: This just uses the default document flow and repositions the image relatively. This will only work when you know the sizes exactly, though. In your css you would have to take padding and margin into account.