IE 6 layout problems

**IamAdam** · Sep 7, 2007, 07:11

This is my 1st layout in CSS, after a long history with tables. I am beginning to get a hang of it, just a few problems.

The layout is supposed to be centered. The "right-slide" box is supposed to have a height of 100% so it would reach the bottom of the page. It works in Firefox, but in IE 6 the page is aligned to the left and the "right-slide" is not 100%.

HTML Code:

<html>
<head>
<title>Good Stuff</title>
<style type="text/css" media="screen">

body {
        background:#666666;    
        color: #FFFFCC;    
        font-family: palatino linotype;
        height: 100%;
        }


#outer{
    min-height: 100%;
    width:980px;
    margin-left:auto;
    margin-right:auto;
    text-align:left;
    position:relative
}



#leftcontent, #right-slide, #centercontent {
    float:left;
    width:200px;
}

        
    #leftcontent {
        border:0px solid #000;
        width:200px;
        height:500px;
        }
        
    #right-slide {
        z-index: 0;
        width:160px;
        height: 100%;
        background:#cccccc;
        }
        


    #centercontent {
         width:610px;
        background:#666666;
           border:0px solid #000;

        }

    #top-intro {
        margin-left: 200px;
        width:700px;
        background:#666666;
        border:2px solid #000;
        }
        
</style>

</head>

<body>

<div id="outer">

<div id="leftcontent">
left content
<br>
</div>

<div id="top-intro">
header content
</div>

<p>

<div id="centercontent">
center content
</div>

<div id="right-slide">
rightcontent
</div>

</div>


</body>

</html>

**funktifyknow** · Sep 7, 2007, 07:43

Fixed- try using all percentage widths and heights. At least that is what I did and here is my code below.

HTML Code:

<html>
<head>
<title>Good Stuff</title>
<style type="text/css" media="screen">

body {
        background:#666666;    
        color: #FFFFCC;    
        font-family: palatino linotype;
        height: 100&#37;;
	overflow: auto;
        }


#outer{
    width:980px;
    margin: auto;
    text-align:left;
    position:relative;
    border: 1px solid red;
    height: 100%;
}



#leftcontent, #right-slide, #centercontent {
    float:left;
    position: relative;
}

        
    #leftcontent {
        border:1px solid green;
        width:20%;
        height:100%;
        }
        
    #right-slide {
        width:19%;
        height: 100%;
        background:#cccccc;
        }
        


    #centercontent {
         width:60%;
        background:#666666;
           border:1px solid blue;

        }

    #top-intro {
        margin-left: 20%;
        width:70%;
        background:#666666;
        border:2px solid #000;
        }
        
</style>

</head>

<body>

<div id="outer">
<div id="top-intro">
header content
</div>
<div id="leftcontent">
left content
<br>
</div>
<div id="centercontent">
center content
</div>
<div id="right-slide">
rightcontent
</div>

</div>


</body>

</html>

This should display relatively the same in IE and FF. The main difference is how IE and FF display the 100% since you have it inside a wrapper. FF the right-slide and leftcontent boxes go all the way to the bottom of the screen, and in IE they stop inside of your wrapper.

**Centauri** · Sep 7, 2007, 21:51

If it doesn't centre in IE6 - do you have a valid and full doctype at the start of the html ?

**sularome** · Sep 8, 2007, 08:31

Gee.. i would recomend as a start to add doctype:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

And it will center the site

Now about the 100% thing:
1. you have to add

Code:

html{height: 100%;}

2. Then to the #outer :

Code:

    min-height: 100%;
    height: 100%;
    width:980px;
    margin-left:auto;
    margin-right:auto;
    text-align:left;
    position:relative

3. And Then finaly to the #right-slide :

Code:

    #right-slide {
        width:160px;
        min-height: 100%;        
        _height: 100%;
        background:#cccccc;
        }

**IamAdam** · Sep 8, 2007, 10:42

Thank you, I got the page centered. I am still having problems with making the right column be 100%. I cannot seem to pin-point the problem. Here's my code:

HTML Code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Good Stuff</title>
<style type="text/css" media="screen">

    body {
        background:#666666;    
        color: #FFFFCC;    
        font-family: palatino linotype;
        height: 100%;
        overflow: auto;
        margin-bottom: 0;
        }

    html{height: 100%;}

    #outer{
           min-height: 100%;
            height: 100%;
        width:980px;
        margin-left:auto;
        margin-right:auto;
        text-align:left;
        position:relative
        }

    #leftcontent, #right-slide, #centercontent {
        float:left;
        position: relative;
        }

        
    #leftcontent {
        border:0px solid #000;
        width:200px;
        }
        
    #right-slide {
        z-index: 0;
        width:160px;
            min-height: 100%;        
            _height: 100%;
            text-align:center;
        background:#333333;
        border-left:2px solid #ccc;
        border-right:2px solid #ccc;
        }
        

    #top-intro {
        margin-left: 210px;
        width:760px;
        background:#333333;
        font-size: 14px;
        border:2px solid #ccc;
        }
    
    #centercontent {
        height: 100px;
         width:610px;
        background:#666666;
           border:0px solid #000;
        }
</style>
</head>


<body>
<div id="outer">

<div id="leftcontent">
LEFT
</div>

<div id="top-intro">
INTRO
</div>

<div id="centercontent">
CENTER
</div>


<div id="right-slide">
RIGHT
</div>

</div>
</body>

</html>

**Paul O'B** · Sep 8, 2007, 10:50

Hi,

Originally Posted by funktifyknow

Fixed- try using all percentage widths and heights

Unfortunately it's not fixed it's quite badly broken

I'm afraid that you are using methods that just won't work. You cannot use 100% heights in that way. If you specify 100% height for the element then that's all you will get (assuming the browser has something to base 100% on anyway). If the content surpasses the 100% height it will be ignored.

The only way to specify a height that will allow a column to grow greater than the height is to use min-height. Of course IE6 doesn't understand min-height so you need to supply ie6 with a hack that supplies it with height instead as ie6 and under treat height as a minimum anyway.

Unfortunately using min-height means that children will have nothing to base their height on and the height collapses to auto. This effectively means that you only get one shot at using 100% height and that is usually used for the main wrapper. You can't nest any more elements and make then stretch to this parents height (unless you are using absolute positioning but this doesn't work in IE either).

You can't also specify 100% height for an element that starts some way down the page because it will the extend 100% down from its position thus forcing a vertical scrollbar as in your example.

Please read the faq on 100% height as this is explained in detail.

In reality you can't specify columns in css that keep track with each other and you have to resort to other methods to achieve this. The 3 col sticky thread shows a number of methods to achieve this but is a complicated subject.

Perhaps the easiest way to provide full length columns is to use a background image on the main 100% wrapper (min-height:100%) to provide the illusion of full length columns as in this example shown below.

http://www.pmob.co.uk/temp/3col-centred-template7.htm

If you add content to any of the columns then all columns will appear to grow in unison because the background is revealed on each through the image on the main wrapper.

You must use a valid doctype or IE6 will be in quirks mode and all bets are off because it will use the broken box model among other unwanted legacy behavior.

**Paul O'B** · Sep 8, 2007, 11:23

Originally Posted by IamAdam

Thank you, I got the page centered. I am still having problems with making the right column be 100%

As I said above you are using the wrong method. You should change your html to something similar to this:

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Good Stuff</title>
<style type="text/css" media="screen">
html,body{
    height:100%;
    margin:0;
    padding:0
}
p{margin:0 0 1em 0}
body {
    background:#666;    
    color: #FFFFCC;    
    font-family: palatino linotype;
    text-align:center;
}
#outer{
    min-height: 100%;
     width:980px;
     margin:0 auto;
  text-align:left;
     position:relative;
  background:red;
}
* html #outer{height:100%;}
#leftcontent, #right-slide, #centercontent {
  float:left;
  position: relative;
}       
#leftcontent {
    width:200px;
    background:#999;
  border-left:2px solid #ccc;
  border-right:2px solid #ccc;
    min-height:40px;/* stop centre float from moving left if no content is present in left column*/
}
* html #leftcontent {height:40px}
#right-slide {
    z-index: 0;
     width:160px;
    text-align:center;
    background:#333;
  border-left:2px solid #ccc;
  border-right:2px solid #ccc;
}       
#top-intro {
  width:772px;
  background:#333;
  font-size: 14px;
  border:2px solid #ccc;
    display:inline;/* ie double margin bug*/
    float:left;
}
#centercontent {
  width:612px;
  background:#666;
}
</style>
</head>
<body>
<div id="outer">
    <div id="leftcontent">
        <p>Left content goes here: Left content goes here: Left content goes here: Left content goes here: Left content goes here: Left content goes here: Left content goes here: Left content goes here: </p>
    </div>
    <div id="top-intro">
        <h1>Heading</h1>
    </div>
    <div id="centercontent">
        <p>Centre content goes here : Centre content goes here : Centre content goes here : Centre content goes here : Centre content goes here : Centre content goes here : Centre content goes here : Centre content goes here : </p>
    </div>
    <div id="right-slide">
        <p>Right conntent goes here : Right conntent goes here : Right conntent goes here : Right conntent goes here : Right conntent goes here : </p>
    </div>
</div>
</body>
</html>

And then simply make an image that vcan be repeated on the main outer to produce the illusion of columns.

This was the image I use in my example above:

http://www.pmob.co.uk/temp/images/3-...-blueshade.gif

Make a similar image that fits your layout.

When you have that image in place you won't of course need the borders and background colours on the existing elements as they will all be taken care of by that one image.

This is the easiest way to do what you want. There are methods to do it without images but they are very complicated.

Hope it helps anyway

**funktifyknow** · Sep 11, 2007, 11:26

Well don't I feel like a donkey now. No not really. I will give that article a read. BTW I really enjoy your blog. It has helped me out a couple difficult spots.

**Paul O'B** · Sep 11, 2007, 12:04

Well don't I feel like a donkey now

Don't worry about it - at least you tried which is the main thing

The SitePoint Forums have moved.

User Tag List

Thread: IE 6 layout problems

Thread Tools

Display

IE 6 layout problems

Bookmarks

Bookmarks

Posting Permissions