Border Box Problem. Any ideas? Firefox ok IE not

[sentinelo]

My full css site (3 column left nav with masthead and footer) displays fine in full screen, however when I minimize the browser window (IE 5 -6) and start to slowly drag the window to make the width smaller, the middle content area of my site will move way down the page leaving a big blank area where it should be.

The following code completely fixed the problem in firefox:

*
{
-moz-box-sizing:border-box;
}

I can now drag to any width and the middle content area of my site stays exactly in the middle.

However, IN IE 5 - 6 the problem still occurs. Could someone please tell me what I need to do in order to achieve the same effect In IE 5+ .

I even tried adding the strict DOCTYPE for it to try to fix the problem but it did not.

Any help is greatly appreciated.

[googalot]

Hi sentinelo,

You would have to provide more of your code in order for the problem to be diagnosed.

However I would suggest that your left and right navigation areas as well as your masthead are set absolutely and that your center box is set relatively with fixed margin settings to prevent overlap. I would then close off my layout and then float the footer underneath everything.

Here is an example of what I mean:

#masthead{
height:100px;
margin:0;
padding:0;
}

#left-column{
position: absolute;
top: 101px;
left: 0px;
width: 200px;
margin: 0;
padding: 0;
}

#right-column{
position: absolute;
top: 101px;
right: 0px;
width: 200px;
margin: 0px;
padding: 0px;
}

#middle-content{
position: relative;
margin: 0 201px 20px 201px;
}

As you can see the middle content's relative positioning will cause it to be displayed beneath the masthead and the margins fit it perfectly in relation to the outside columns. I would then include my footer beneath the middle content.

This layout will display identically to the human eye in both FireFox and IE.

All the best,

DPG

[sentinelo]

Thank you for your reply, the template i'm using uses percentages. here is the code:

#masthead{
padding: 10px 0px 0px 0px;
border-bottom: 1px solid #cccccc;
width: 100%;
background-color: #FFFFFF;
}

#navBar{
float: left;
width: 15%;
margin: 0px;
padding: 0px;
background-color: #fff;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}

#headlines{
float:right;
width: 20%;
border-left: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
padding-right: 10px;
}

#content{
float: left;
width: 63.8%;
}

[Longhaired Genius]

Take a look at the template I mentioned in this thread for a way to get around this problem.
[webmasterworld.com...]

[Span]

I think it's the 12px borders and padding on your columns that are doing it. At the moment your content div jumps down your 98.8% total columns width and those 12px add up to over 100%...

[sentinelo]

Googalot You Saved The Day; I used that format and it works in like a charm in IE and Firefox.

[googalot]

sentinelo,

You are very welcome. I am glad I could be of assistance. :)

A point that is often overlooked with absolute positioning is that when you code your page, it does not matter in which order you place your content as it will still appear as you wanted it on the page. This can be of great benefit to your SEO efforts.