Cannot get float left/right to work for a div in Internet Explorer

Here is the html:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" type="text/css" href="styles.css"/>
    <title></title>
  </head>
  <body>
    <div align="center">
      <div id="main-header-content" class="content">
        <div class="left">
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
          euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad 
          minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut 
          aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in 
          vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla 
          facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent 
          luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber 
          tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod 
          mazim placerat facer possim assum.
        </div>
        <div class="right">
          <div class="left">
            <img src="http://www.mywebk9.com/images/question.png" alt="Questions"/>
          </div>
          <div class="right">
            <span class="small-text">Lorem ipsum dolor sit amet</span>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

and styles.css:

*
{
  margin: 0;
  padding: 0;
}
body
{
  font-family: Verdana;
  font-size: 8pt;
}
div.content
{
  width: 585px;
}
div#header-content div
{
  padding: 20px;
  text-align: justify;
}
div#main-header-content > div.left
{
  padding-left: 40px;
  padding-right: 7px;
  text-align: justify;
  width: 350px;
}
div#main-header-content > div.right
{
  padding-left: 7px;
  padding-right: 15px;
  width: 165px;
}
div#main-header-content div.right div.left
{
  width: 20px;
}
div#main-header-content div.right div.right
{
  text-align: left;
  width: 142px;
}
div.left
{
  float: left;
}
div.right
{
  float: right;
}
.small-text
{
  font-size: smaller;
}

This works fine in FF and Chrome. It should be two columns one with text and one with an Icon and a small amount of text. How can I make this work in IE? I tried the div clear=both thing and that isn't doing anything.

Also upvotes for anyone who can give me some tips on how to write pages and use styles that work across FF, Chrome and IE >= 7.

could be because your not defining a doctype and IE is viewing your page in Quirksmode as appose to Standards mode (or almost Standard).

Read this article to find out more:

http://www.quirksmode.org/css/quirksmode.html

I've checked your site in standards mode and in IE7 the 2 column behave as they should (like in FF & Chrome)

I can suggest several things although I'm not sure which will help if indeed any of them will:

Put a DOCTYPE (eg Transitional HTML 4.01) on your document. This forces IE into so-called "standards-compliant" mode rather than the euphemistic "quirks" mode;
Don't reuse the left and right classes like that. It forces you to use the child selector which is only IE7+ and there's no need for it;
If your div contains nothing but floats it will have 0 height. You can address this by putting a 0 height div below them with "clear: both" on it or "overflow: hidden" on the parent;
Get rid of align="center". That's not standard.

Here's a skeleton to consider using:

<div id="container">
  <div id="left">Text</div>
  <div id="right">
    <div id="icon">(image)</div>
    <div id="text">(text)</div>
  </div>
</div>

combined with:

html, body, div { padding: 0; margin: 0; border: 0 none; } /* or a proper reset CSS */
#container { margin: 0 auto; width: 585px; overflow: hidden; } /* center */
#left { text-align: justify; width: 350px; float: left; }
#right { width: 235px; float: right; overflow: hidden; }
#icon { float: left; width: 20px; }
#text { float: right; width: 142px; }

and so on.

First I'd skipped all

div#main-header-content > div.left

and replace with

div#main-header-content div.left

as they don't work in IE6.

Secondly, I'd use

div.right {
    float: left;
}

And additionaly, I would definately skip <div align="center">...</div>, as it is deprecated. Instead I would rearrange div.content to

div.content {
    position: relative;
    width: 585px;
    margin-left: -292px
    left: 50%;
}

The trick to center is to (using position:relative or position:absolute) set the left point to half of the width, and then move the margin back to half of the element width (where the 'element' is the element you want to center).

modified css

div#main-header-content  div.left
    {
      padding-left: 40px;
      padding-right: 7px;
      text-align: justify;
      width: 350px;
    }
    div#main-header-content  div.right
    {
      padding-left: 7px;
      padding-right: 15px;
      width: 165px;
    }

Instead of ur css for these class u try this works fine in IE and Firefox too..

来源：https://stackoverflow.com/questions/1443007/cannot-get-float-left-right-to-work-for-a-div-in-internet-explorer

标签

css

internet-explorer

stylesheet

css-float