« previous next »
Pages: [1]

Author Topic: Floating problem in IE only  (Read 802 times)

0 Members and 1 Guest are viewing this topic.

Offline lemminTopic starter

  • Addict
  • Posts: 1,651
    • View Profile
Floating problem in IE only
« on: February 23, 2010, 03:01:23 PM »
I am trying to float a div on the left and one on the right with a content div in the middle. Everything works fine until I try to set a height for the content div. Here is the code:
Code: [Select]
<html>
<head>
<style>
#content
{
   background-color:blue;
   border: 2px solid black;
}
#left
{
   background-color:red;
   width:28px;
   height:420px;
   float:left;
}
#right
{
   background-color:green;
   width:14px;
   height:247px;
   float:right;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
<div id="content">Content in here</div>
</body>
</html>

If you paste that code into an html document and view it, you will see it working how I want it. However, place a height:420px into the #content style and that div magically gains margins on the left and right. I've tried killing any inherent margins and padding on everything, but that extra space doesn't seem to exist in the styles anywhere.

All I am trying to do is get a "min-height" on the content div and, although IE doesn't support that style, "height" effectively works the same. I am using a work-around where the height only gets sets in IE and all other browsers get a min-height. If there is a different way I can do this, that would help too.

Thank you.
Logged

Offline haku

  • Guru
  • Freak!
  • *
  • Posts: 5,707
  • Old Man
    • View Profile
Re: Floating problem in IE only
« Reply #1 on: February 23, 2010, 08:44:21 PM »
Which IE? All of them behave differently.

But, I'm assuming you mean IE6, since you mentioned that min-height doesn't work.

Give the floated elements 'display:inline-block' and see if that helps.
Logged

Offline lemminTopic starter

  • Addict
  • Posts: 1,651
    • View Profile
Re: Floating problem in IE only
« Reply #2 on: February 26, 2010, 04:07:02 PM »
I'm actually using IE8 Beta Version 8.0.6001.18241. MSDN Library shows that min-height and min-width are legal in IE, but they don't work in this version at least.

I have tried all the different display types, but none fix this problem.

Thanks for the help.
Logged

Offline haku

  • Guru
  • Freak!
  • *
  • Posts: 5,707
  • Old Man
    • View Profile
Re: Floating problem in IE only
« Reply #3 on: February 26, 2010, 09:40:21 PM »
They are supported in IE8.

Why are you using a beta version?
Logged

Offline arbitter

  • Enthusiast
  • Posts: 342
  • Gender: Male
    • View Profile
Re: Floating problem in IE only
« Reply #4 on: March 13, 2010, 05:51:44 AM »
Do they really work? Because I have IE8 and min-height or max-height doesn't work here eather, have to do the workaround also used for IE6
Logged

Offline haku

  • Guru
  • Freak!
  • *
  • Posts: 5,707
  • Old Man
    • View Profile
Re: Floating problem in IE only
« Reply #5 on: March 13, 2010, 10:41:09 AM »
They definitely work in IE7 and IE8. So if you are having problems, your problem is somewhere else. Have you validated your CSS on the W3C site?

Also, why are you using a beta version of IE8?
Logged

Offline arbitter

  • Enthusiast
  • Posts: 342
  • Gender: Male
    • View Profile
Re: Floating problem in IE only
« Reply #6 on: March 13, 2010, 12:59:26 PM »
I personally havn't validated them, I wouldn't really know what validation type to use. I used the xhtml validation once but it gave 'problems' with the closer for the </head> and the </body> and stuff like that...

I'm not the starter of this topic, I'm using the normal versio of IE8. Yet I get all the problems they had n IE6 and I don't understand why. Anyhow, it's better like this, at least I can 'test' it for IE6. I've still got many problems with the site-layout that work perfect in Chrome, Safari, FF, Opera, but not in IE8.
Logged
Pages: [1]
« previous next »