ansaurus

Question

Headline problem when floating around image

Answer 1

A:

It's not "pure CSS", but it is "IE-proof"!

<table>
  <tr>
    <td style="margin-right: 10px">
      <img src="1.gif">
    </td>
    <td valign="middle">
      <h1>Some headline</h1>
    </td>
  </tr>
</table>

Brad 2010-10-25 13:39:01

Oh look, someone doesn't like `tables` and thinks they deserve an automatic down-vote. Well, I think **IE** deserves a few down-votes.

Brad 2010-10-25 13:52:03

Answer 2

+4 A:

Is there a specific need to float the H1 tag next to the image? Another alternative would be to assign the image as a background to the H1 tag, and then use css background-position and padding to position your text and image to display correctly. Can you provide your html markup or a link to the page?

h1 { background: url(/path/to/my_image) 10px 15px no-repeat; padding: 20px; }

That would put your image as the background of the H1, and position it 10px from the left and 15px from the top, for example.

Stephen Moran 2010-10-25 13:42:50

+1 for the background-image suggestion

Brad 2010-10-25 13:52:39

@Stephen Moran This is a nice solution, but you are limited to a certain size of the image.

Justus Romijn 2010-10-25 14:15:08

@Justus, you're not limited to a particular **size** of image, you just can't ***scale*** it with this method. You are limited to the native resolution of the image.

Brad 2010-10-25 14:33:11

@Brad I understand. But what the asker wants is an image next to the headline. So you can use padding/background, but then you need to know what the size of the image is to give the headline enough space to fit the image in.

Justus Romijn 2010-10-25 14:38:41

@Justus, I see, so you're just pointing out that the positioning (`10px 15px`) of the background image and padding (`20px`) of the header is related to the dimensions of the image itself; fair 'nuf. So my solution, while not pretty and obviously not popular, is **very** effective.

Brad 2010-10-25 14:42:00

@brad My point is that you should not have to use CSS when you are changing content. If there are multiple headlines with images, each headline should get a different class to change the values of the padding, otherwise the text would overlap the image. It is very **ineffective** that way.

Justus Romijn 2010-10-25 14:52:45

@Justus, then everyone should rally behind my table-solution. :)

Brad 2010-10-25 14:55:51

@brad I think i gave a nice, cross-browser and clean solution below, but this answer was already accepted :)

Justus Romijn 2010-10-25 15:00:10

Answer 3

A:

Why float the image? Save yourself some time and put the image in the headline tag, and then you can use vertical align to position it.

JsFiddle solution

Works cross-browser as far as I can check.

Justus Romijn 2010-10-25 14:06:09

ansaurus

tags:

views:

answers:

Headline problem when floating around image

related questions