Fluid layout - IE6 clichés the layout when resizing

cyberseed · June 15th, 2007, 07:48 AM

Hi I am working on a table-less fluid layout that is fairly simple but I noticed when you resize the window in IE6 by dragging the edge of the window it sometimes displays the layout of the divs wrong. This does not happen in FF. Any help, yes please!

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>margins and padding</title>
<link href="css/global.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrap">
  <div id="container">
    <div id="leftcontainer"></div>
    <div id="middlecontainer"></div>
    <div id="rightcontainer"></div>
  </div>
  <div id="content">Content for id "content" Goes Here</div>
</div>
</body>
</html>

css:

Code:

body {
 color: #000000;
 background-color: #FFFFFF;
 margin: 10px;
}
#wrap {
 width: 96%;
 background-color: #CCCCCC;
 margin-right: auto;
 margin-left: auto;
 height: 500px;
}
#leftcontainer {
 background-color: #666666;
 width: 30%;
 height: 80px;
 float: left;
}
#middlecontainer {
 background-color: #CCCCCC;
 width: 30%;
 height: 80px;
 float: left;
 margin-right: 5%;
 margin-left: 5%;
}
#rightcontainer {
 background-color: #666666;
 width: 30%;
 height: 80px;
 float: right;
}
#container {
 background-color: #FFFFFF;
 width: 100%;
 height: 80px;
}
#content {
 background-color: #666666;
 color: #FFFFFF;
 margin-top: 10px;
 margin-bottom: 10px;
}

Lchad · June 15th, 2007, 07:51 AM

I wonder if it's because you are using % for the widths. It might be worth trying em's or pixels.

Lchad · June 15th, 2007, 07:54 AM

Just found this http://css-discuss.incutio.com/?page=UsingPercent

Quote:

Note that you may experience problems in IE when using several percentages that add to 100%, probably due to rounding errors. For example, five images sized at 20% each may wrap onto a second line. If this happens, try setting a slightly smaller percentage (e.g. 19.9%) to make IE behave. You may wish to use a CssHack to hide this declaration from other browsers.

VanessaJW · June 15th, 2007, 08:57 AM

Quote:

Originally Posted by Lchad

I wonder if it's because you are using % for the widths. It might be worth trying em's or pixels.

I thought a fluid layout had to be in %, no? Can it still be fluid in pixels?

Ryan Fait · June 15th, 2007, 09:22 AM

Yeah, you're right, Vanessa: em and pixel are set widths (em isn't exact all of the time), but you need percentages for a fluid layout. You're also right, Linda. Whether it's a rounding error or something else, IE doesn't always display things correctly when it's not exact.

In my experience, if you tell a browser to split something 50/50 when the width 3 pixels, there will be an extra pixel of space in there. It depends on the circumstances, but this is just one of those things that you need figure out a per-case incident.

cyberseed · June 15th, 2007, 09:33 AM

[quote=Lchad;193940]Just found this

Thanks Lchad that seems to work. I changed the middlecontainer to 29.8% (didnt work at 29.9%).The only problem is that its not totally symmetrical now but at least it is cliche free. FF is so much better!

VanessaJW - a totally fluid layout can not be in pixels. You have to use % or ems. I am cheating and using pixel heights but % widths which makes life a little easier. For instance I have noticed that if you float divs within a parent div the parent div does not inherit the height of the child in FF but it does in IE6. Its all a bit tricky really especially if you want to validate to AA.

MikeHopley · June 15th, 2007, 09:18 PM

Quote:

Originally Posted by VanessaJW

I thought a fluid layout had to be in %, no? Can it still be fluid in pixels?

It depends what you mean by "fluid".

When you set a design in px, then it can't be adjusted. Technically, it's a relative unit -- but it's relative to the viewing device, which isn't that helpful (most people won't change their screen resolution just to resize your website).

When you set a design in %, then it resizes depending on the window size.

When you set a design in em, then it resizes with the font (my favourite: you control the proportions and line length, but the user can resize the whole page).

Exception: setting font-sizes in em or % is the same: 1em = 100%. But make sure you set your base font size (in *, html, or body) using % and not em, because IE has a freaky text-resizing bug if you use em.

You can combine these with max-width for some added flexibility in low resolutions (content compresses when squeezed, rather than getting a horizontal scrollbar).

VanessaJW · June 16th, 2007, 01:14 AM

Quote:

Originally Posted by MikeHopley

Exception: setting font-sizes in em or % is the same: 1em = 100%. But make sure you set your base font size (in *, html, or body) using % and not em, because IE has a freaky text-resizing bug if you use em.

Thanks for the explanation Mike. I didn't realise you could actually set the font size in %, I thought you would always set the font in px or em, and it would just be your various widths that would be in %. I think I feel a bit more in control of things if I forget about fluid and just use px for everything; the display seems more certain that way. I can see the advantages though of % and em - I'll have to have a bit of a play with doing fluid layouts when I have time.