ansaurus

Question

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

Answer 1

+1 A:

Hi, 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)

Wayne Austin 2009-09-18 07:31:01

W00t! This little thing fixed it!

DJTripleThreat 2009-09-18 20:36:54

Answer 2

+1 A:

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.

cletus 2009-09-18 07:37:54

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.

DJTripleThreat 2009-09-18 20:37:45

Answer 3

+1 A:

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

Aron Cederholm 2009-09-18 07:39:41

Answer 4

A:

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

boss 2009-09-18 08:19:27

ansaurus

tags:

views:

answers:

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

related questions