Question

It doesn’t stay where I want it, look at this:

<div style="float: left; width: 30%">
 <img src="{avatar}" alt="" />
</div>

<div style="float:right; width: 70%; text-align: left">
 {message}
</div>

<div style="clear:both"></div>

Internet Explorer:

Mozilla Firefox:

I want the text to be in the top (tried vertical-align: top), and i’d like the image to be in the white box in IE.

Hope someone more skilled can help me out.

Thanks!
Can’t figure out the problem :/

Edit: Added whole code

* { padding: 0; margin: 0; }

body {
font: 11px Geneva, "Trebuchet MS", Arial, Verdana, sans-serif;
width: 999px;
background: #EFEFEF;
}

#content {
width: 400px;
}

.thread-content {
padding: 5px;
border: 1px solid #CECFCE;
background: #FFF;
}

div.header {
border: 1px solid #CECFCE;
background: #FFF;
margin-bottom: 10px;
}


<div id="content">

<div class="header">{title}</div>
<div class="thread-content">

<div style="float: left; width: 30%; padding: 5px">
 <img src="{avatar}" alt="user avatar" />
</div>

<div style="float: right; width: 70%; text-align: left">
 {message}
</div>

<div style="clear:both"></div>
</div>

</div>

Answer 1

Be sure the margin of both are set to 0:

<img src="{avatar}" alt=""  style="float: left; width: 30%; margin: 0px"/> 

<div style="float:right; width: 70%; text-align: left; margin: 0px">
 {message}
</div>

<div style="clear:both"></div>

As css can be really tricky, some other solutions to try:

• Let both float left, should make no difference.
• Make sure the border doesn’t increase the size.
• Descrease the width of one a bit, IE is stubborn.