4 replies [Last post]
Martagnan
Offline
Regular
uk
Last seen: 16 years 9 weeks ago
uk
Joined: 2003-08-27
Posts: 21
Points: 0

Using a slight variation on Alan Tricks method over at WSG I have assembled a reasonably robust 3 column layout with header and footer. Only 2 slightly irritating problems remain....

1. IE inserts a slight gap between the columns.
2. I need a min-width hack for the #container that works!

Any help in resolving these little issues is very much appreciated.

Thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Martin Smith</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<style>
* {
margin: 0;
padding: 0;
}

body
{
font-size: 62.5%;
margin: 1em;
}
			
#container
{
min-width: 78em;
background-color: #FF0000;
}

			
#header
{
background: #000;
height: 10em;
}
			
#leftColumn
{
float: left;
width: 23em;
background: #999;
height: 30em;
}
			
#rightColumn
{
float: right;
width: 10em;
background: #ddd;
height: 30em;
}
			
#contentColumn
{
background: #666;
height: 30em;
}
			
#footer
{
background: #000;
clear: both;
height: 2em;
}

</style>
    
</head>

<body>
<div id="container">
<div id="header">dsds</div>
<div id="leftColumn">dfdfd</div>
<div id="rightColumn">dffdf</div>
<div id="contentColumn">sdsdsd</div>
<div id="footer">dssds</div>
</div>
</body>
</html>

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

3 col fluid + Fixed IE issue

At a guess you are seeing IE's 3px bug. There's no real solution to it, if you must have pixel accuracy then you can try applying -3px margins on the interior edge of the floats. Pixel accuracy in a design is not all its cracked up to be, a design that allows a little flexibility will save you a lot of headaches - especially if you use em units (which is good) as they can give browsers pixel rounding problems.

Using CSS expressions is a good way to give IE min-width.

#container {
  min-width: 76em;
  width: expression(document.body.clientWidth < 76em? "76em" : "auto" );
}

If IE is in standards mode (ie. you have a proper doctype and no xml prolog) then you may need to use document.body.parentNode.clientWidth.

Martagnan
Offline
Regular
uk
Last seen: 16 years 9 weeks ago
uk
Joined: 2003-08-27
Posts: 21
Points: 0

3 col fluid + Fixed IE issue

Thanks Chris!
Your margin suggestion works great and i've implemented it. Unfortunately the min-width hack has no effect at all.

Cheers

Martagnan
Offline
Regular
uk
Last seen: 16 years 9 weeks ago
uk
Joined: 2003-08-27
Posts: 21
Points: 0

3 col fluid + Fixed IE issue

Hello again!

Just for the record I found a solution at http://archivist.incutio.com/viewlist/css-discuss/43367

Instead of using the solution 'as is', I put it directly into the CSS file like so... (complete with * html IE filter).

* html #container {
width: expression((documentElement.clientWidth < 780) ?
"780em" : "auto" );
}

Now my layout is 100% of the window and wont collapse below 78em if the window is resized.

Cheers![/url]

Martagnan
Offline
Regular
uk
Last seen: 16 years 9 weeks ago
uk
Joined: 2003-08-27
Posts: 21
Points: 0

New Problem!

Padding doesn't seem to work on the #contentColumn with FireFox?

UPDATE > Using overflow: hidden; on the #contentContainer seems to fix things!?!?!

Any suggestions why are very welcome! :?