Question

I have some code to display a logo at the bottom of my page:

Unfortunately, in IE (9, compatibility mode on or off), it looks like this:

The only part I’m really worried about is the text being in the wrong place.

Here’s the code:

<img src="img/logo.png" id="kwiiusIMG" height="50"/><br /><br />
<p class="kText">A Kwiius.com service by Jamie McClymont</p>

CSS:

#kwiiusIMG {
  float: left;
  margin-left: 305px;
}

.kText {
  margin-left: 0px;
  text-align: center;
  color: #666666;
}

Sorry, I’m a bit of an idiot when it comes to this stuff. Any idea how I could get IE working right?

Answer 1

You are not clearing the float. I used to do something like this (code is not tested):

<img src="img/logo.png" id="kwiiusIMG" height="50"/>
<br />
<div style="clear: both;"></div>
<br />
<p class="kText">A Kwiius.com service by Jamie McClymont</p>

I don’t know the whole design, but I guess the float: left in #kwiiusIMG is not needed at all.