Ie7: How to Make Td Float

IE7: How to make TD float?

I don't think this is possible the way you want.

When you apply the float to td elements [in FF/IE8[ they become anonymous table objects as per the CSS 2.1 spec. Essentially, they're no longer table cells, and these anonymous objects have a display type that is floatable.

IE7 doesn't follow this part of the spec, in fact, the display type of the cells cannot be altered at all, and objects with a display type of table-cell can't be floated.

If you absolutely need to use a table (instead of a ul/li) could you do something like this instead?

<style type="text/css" media="screen">`
    table {
        width: 100%;
    }
    .f {
        border: 1px solid red;
        float: left;
        height: 10px;
        width: 500px;
    }
</style>

<table summary="yes">
    <tr><td>
    <span class="f">1</span>
    <span class="f">2</span>
    <span class="f">3</span>
  </td></tr>
</table>

ie7 css with div align right in TD

You are not setting any width on the table, so it will be as small as possible to fit the contents.

Try also putting "Hi" in a div (or span) with float left. This should work, in theory.

You may want to put both sides in spans actually, come to think of it, as divs default to the size of their parent (-border, margin and padding).

Hope this helps.

Regards,

Richard

Edit: The actual answer to this is to set the position of the right-floated div to absolute, height / width to 16px, top and right to 0. Also remove the float: right. (I have left my original answer there so that a) the comments make sense and b) anyone who reads this in the future knows that the original answer didn't work).

DIV in td float right

You need to make your table's width 100%, then control the widths of your first 2 columns, and finally right-align your third column.

http://jsfiddle.net/25Mqa/1/

<table>
 <tr>
  <td class="first">First</td>
  <td class="second">Second</td>
  <td class="third">Third</td>
 </tr>
</table>

CSS:

table { width:100%; }
.first, .second { width:50px; }
.third { text-align:right; }

IE7 image float right in positioned container

It appears as though IE7 is not allowing the img to overflow to the left side of the #left wrapper even though it has float: right applied. So the narrower width of the wrapper div compared to the wider width of the img is keeping it from doing anything but aligning its left edge to the left edge of the wrapper. The fix for this can be seen in this fiddle, where I have added a negative margin-left equal to the img width:

#left img {
    border: 0px;
    float: right;
    margin-left: -640px; /* <-- equal to img width */
}

I recommend doing this in a targeted way only to IE7. While it did not seem to adversely affect either Firefox or IE9+ (I did not test Webkit), it did cause issues in display for IE8. Since it is not needed for the other browsers, then using conditional comments or some other means of targeting IE7 for this CSS should be used.

IE7 gets the content in my table to overlap

Three things:

The code would be much easier to fix and manipulate if you separated structure (HTML) from style (CSS). Not a terrible criticism, just an observation.
You could remove the positioning and floats in your tds and give the elements display:inline-block. Might work.
If that fails, use a conditional comment to target IE7 (eg., <!--[if IE 7]>) and apply widths to the tds there.

IE7 and IE8: Float clearing without adding empty elements

Try this, demo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
  <title>list floats</title>
  <style type="text/css">
  li{clear: none;list-style: none}
  .clearer{float: left; clear: left}
  .floater{ float:left}
  </style>
</head>
<body>
<ul>
    <li class="">1</li>
    <li class="clearer">2</li>
    <li class="">3</li>
    <li class="clearer">4</li>
    <li class="floater">5</li>
    <li class="">6</li>
    <li class="clearer">7</li>
</ul>
</body>
</html>

How to display table-cell on a single line (IE6-IE7)?

use this css:

body{
    margin: 0
}
#table{
    display: table;
    width: 100%;
    height: 50px;
    *overflow:auto;
}
#r1{
    display: table-cell;
    width: 30px;
    background-color: black;
    *float:left;

}
#r2{
    display: table-cell;
    width: 30px;
    background-color: #eee;
    *float:left;
}

Ie7: How to Make Td Float