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

css internet-explorer stylesheet css-float

12,762

Solution 1

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)

Solution 2

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.

Solution 3

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).

12,762

Author by

aarona

Updated on June 04, 2022

Comments

aarona about 2 years

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.

aarona almost 15 years

W00t! This little thing fixed it!
aarona almost 15 years

thanks for the tips. All I had to do was add the doctype and it worked. You get a +1 for this information. I will use this as well.