Thanks for taking the time,
Paul.

@Paul: This is unlikely to be what you want as it will probably result in scrollbars on the window and on the element.

html, body {
height:100%;
margin:0;
padding:0
}
body {
background-image:url(‘txblueblank.jpg’);
}
#container {
width:800px;
height:100%;
min-height:800px;
margin:auto;
background-color:red;
overflow:auto;
}
(won’t work in ie6)

The problem is that 800px min-height will be higher than the viewport in most cases and a scrollbar on the viewport will be needed.

If you just want the scrollbar on the element then just use height:100% and no min-height and use overflow:auto to create the scrollbar on the element.

If you want to vertically center an element of fixed height then check through the css articles on here as that has been covered.

I’m trying to get a page of a fixed width floating centrally horizontally, which is the full height of the window, but which shows a vertical scrollbar if the browser height is reduced below a certain value – say 800px.

I think that the code you are discussing here should do that but I’m not sure. I’ve tried incorporating the code at the top but the scrollbar never appears.
the css I’ve got so far is:

html,body
{
height:100%;
}

body
{
padding:0px;
background-image:url(‘txblueblank.jpg’);
}

#container
{
width:800px;
height:100%;
min-height:800px;

margin-left:auto;
margin-right:auto;
position: absolute;
top: 0px;

left: 50%;
margin-left:-400px;

background-color:white;
}

html>body #container /* not ie6- */
{
height:auto;min-height:800px;
}

Using IE7 – Can I do what I’m trying to do, and if so what am I doing wrong please?

Many thanks,
paul.

It is also not fullproof in IE7 in some very odd cases (especially with min-height:100%) and therefore I recommend the following which is less characters and doesn’t suffer from any issues in IE7 at all.

#outer {min-height:500px;}
* html #outer {height:500px}

#outer {
min-height:500px;
height:auto !important;
height:500px;
}
it worked for me

Not only does it exhibit the same IE7 bug I mention at the end of the article it mis-uses !important and has actually caused people not to understand the way that the !important rule works. Consequently most people don’t think it works in IE6 when it works very well.

It’s only a hack because IE doesn’t understand 2 rules the same in a block and only actions the last one it sees. In normal use !important works fine.

Using !important as a hack is ugly and unnecessary and I advise against using it. Not only does it mix hacks in with the clean code it makes it harder to debug later on if styles are modified further along.

Always remove your hacks from the clean code and only apply them to the browser that has the problem. Why make all browsers read 2 rules when it’s only IE6 that has the problem?

As an aside my method actually uses less code than yours.

e.g.
.test{min-height:500px}
* html .test{height:500px}

Therefore avoid the !important hack like the plague.:)

min-height: 140px;
height: auto !important;
height: 140px;

Even though I tested it in every browser, reports still came in from the odd user who said differently. Complicated hacks aren;t worth it. This is simple. Much more elegant. Thank you.