Why stress about Opera 8? “I love Opera”:http://www.alanhogan.com/conversations/i-love-opera-the-browser , but don’t most users (and there are not many) use the latest version (9), in which there is no bug? And as noted in the article, it only shows on resize. That’s a user-initiated problem that is fixable by reloading, something an Opera user would likely be intelligent enough to try.
I didn’t realise that so many people were vague on positioning so its good that your article brings this to attention.
As a matter of interest you might like to know that the original example can easily be done without using expressions (and in standards mode)and I have converted one of my very (very old) demos to look like the authors.
http://www.pmob.co.uk/temp/2scroll2.htm
or an even older similar example.
http://www.pmob.co.uk/temp/3scrolling2.html
Instead of using expressions to subtract pixel heights from 100% you simply apply top and bottom padding to the html element and then IE interprets 100% height of the body from inside the padding thus giving you your gaps at the top and bottom of the page.
Of course it only works in 100% height scenarios and so is of limited use. I often find that these types of layouts (along with forced fixed positioning examples) only work well in certain situations but not for everything as there are quite often scrollbar issues.
I also notice this quote early in the article which is a little misleading:
“Technically you can use both a right and a left property and leave the width as auto. But unfortunately IE does not support this”¦”?—css-discuss
That isn’t quite true and IE does support the properties left and right at the same time and you would soon see this if you tried it out.
The misconception arises because the background appears to only enclose the content but if there is enough content then it stretches correctly to the positions defined. In fact this can be cured by giving the inner content “haslayout” and then it works as it should.
Its only top and bottom positions that IE doesn’t understand when used together.
Has anyone tried using this technique to create a 2- or 3-column layout that goes beyond the bottom of the window and where both or all of the columns stretch to the same height as a “height-defining” column? I believe I’ve figured out how to do this in all browsers (no, I didn’t use faux columns or funky paddings or margins). I was wondering, Rob, if you’ve seen this before and if not, if you’d be interested in hearing my method. I read an article that said this would be the “holy grail” of CSS web design.
Copy & paste the code below to embed this comment.
michael bell
I use this technique or variants very heavily, thanks to the frames without frames article published (and cited) a while back.
Be forewarned: VERY rarely, and usually inconsistently, Expressions can cause the IE browser to hang in an infinite loop. What appears to happen is the dimension gets calculated which causes the expression to trigger again, ad infinitum. There are some discussions of this, but I don’t have the links.
For me, it was the width being adjusted. In the end I had to pull it from the CSS,and put it in a javascript embedded in the footer of the page. I didn’t like doing so, because CSS is where it should be, but I had to. So people should be aware of this. While I was at it, I fixed the opera issues in JS too (window.opera is a good way to object sniff for opera)
Hi, i was looking for the same layout for some time ago, found the same solution with the absolute positioning of each corner, and ran in to the same problems in IE6 og earlier versions.. After a bid of work i actualy manged to find af solution that works alle the way down to IE5 in pure CSS without the need for Javascript. – Will put it online and post a link if anyone should be interessetet :-)
Hi.. Haven’t had time to write an explanation, but the code should be pretty strait forward :) (There is a small problem with the positioning og the right side scrollbar in IE6 that i haven’t been able to solve yet, but other than that i works as a charm as far as i can se :)
Copy & paste the code below to embed this comment.
Jeremy Livingston
Does anyone know of a way that I could achieve a similar effect using the “em” size unit?
I would like my header to be able to fully encapsulate its text, regardless of the text size the user has chosen.
Copy & paste the code below to embed this comment.
LeMel LeMel
Thanks for taking the time to write this great, clear article.
I’ve done this layout using pure CSS, but using individual BORDERS (as an earlier commenter noted) as if they were margins or padding. The neat trick he didn’t mention: you can set BORDER-COLOR to TRANSPARENT so no need to match background colors or designs. 100% fills the remaining calculated width. You might have to keep an eye on your z-index layering when constructing to prevent mouse events from being captured in the wrong DIV.
Copy & paste the code below to embed this comment.
Liam Donnelly
Whilst your CSS is clean and effective I thought I should point out a few difficulties that it exposes.
Firefox has a well known and long established print bug exposed by the use of absolute positioning – content is curtailed, usually to a single page.
Firefox mousewheel navigation (the autoscroll feature) is also broken.
Neither of these may be considered show stoppers for some but developers might like to be aware of these issues.
Copy & paste the code below to embed this comment.
Graham Armfield
Whilst the solution is neat and taught me things I didn’t know, I do have a worry about those users who can’t use a mouse for some reason.
As exampled it seems impossible to get the DIVs to scroll down using keystrokes. It seems to me that a sighted user who cannot use a mouse would be unable to access the text at the bottom of both the DIVs.
In a similar layout with frames tabbing would give focus to each frame in turn, and then the up and down arrow keys would scroll the individual frames.
Copy & paste the code below to embed this comment.
Brent B
I really enjoyed the article.
One issue I’m having in IE7 is getting a nested DIV to respect the calculated height of the parent div. In Firefox, setting the height property to 100% yields the desired result; that is, a div that consumes the entire height of the underlying element. In IE7, the height is ignored, presumably because the element’s height is calculated rather than specified in CSS.
If someone has a workaround, I’d be grateful for tips.
Copy & paste the code below to embed this comment.
DCkat
The layout I’m stuck with has three fixed width columns. For over two years I have tried different ways to get IE6 (may it someday RIP) to extend the background of the right and left columns all the way to the bottom of the center column (where the varying height main content is). I don’t even have (or need or want) scroll bars.
Maybe there’s an expression-free method to accomplish this somewhere out there, but I haven’t been able to find it. I’m just glad this approach works perfectly for my purpose.
Thanks for taking the time to track down and explain a classic head-scratcher to this non-expert.
Copy & paste the code below to embed this comment.
gael
Thanks, even if we’re seeing IE6 fade away, it is still very much a reality with Asian users.
I have been looking for a cross-browser option of pinning a div to the viewport’s height, preferably without the use of jquery or equivalent.
This is brilliant.
77 Reader Comments
Back to the ArticleAlan Hogan
@John Campell, others—
I thought I had a way to fix the 100% & float problems inside the absolutely positioned elements in IE—add position: relative; to the .container divs.
However, that didn’t do it. But I was unable to find a problem with floats in IE, anyway, just with width: 100%.
Alan Hogan
Why stress about Opera 8? “I love Opera”:http://www.alanhogan.com/conversations/i-love-opera-the-browser , but don’t most users (and there are not many) use the latest version (9), in which there is no bug? And as noted in the article, it only shows on resize. That’s a user-initiated problem that is fixable by reloading, something an Opera user would likely be intelligent enough to try.
martin cermak
<div id=“right”> in the example shoud be <div id=“MAIN”>
Paul O'Brien
I didn’t realise that so many people were vague on positioning so its good that your article brings this to attention.
As a matter of interest you might like to know that the original example can easily be done without using expressions (and in standards mode)and I have converted one of my very (very old) demos to look like the authors.
http://www.pmob.co.uk/temp/2scroll2.htm
or an even older similar example.
http://www.pmob.co.uk/temp/3scrolling2.html
Instead of using expressions to subtract pixel heights from 100% you simply apply top and bottom padding to the html element and then IE interprets 100% height of the body from inside the padding thus giving you your gaps at the top and bottom of the page.
Of course it only works in 100% height scenarios and so is of limited use. I often find that these types of layouts (along with forced fixed positioning examples) only work well in certain situations but not for everything as there are quite often scrollbar issues.
I also notice this quote early in the article which is a little misleading:
That isn’t quite true and IE does support the properties left and right at the same time and you would soon see this if you tried it out.
#main {
position: absolute;
top: 100px;
left: 240px;
right: 120px;
background:red
}
The misconception arises because the background appears to only enclose the content but if there is enough content then it stretches correctly to the positions defined. In fact this can be cured by giving the inner content “haslayout” and then it works as it should.
Its only top and bottom positions that IE doesn’t understand when used together.
Natasha Banegas
#44: the bug you describe does surely exist. I can confirm both the background from the preceding page and pixel distortion on window resize.
I am really interested in a solution to this problem. I would like to adopt this approach, but my company officially supports Safari 1.3.2 :=(
Natasha Banegas
Sorry for the huge text in 55, it looked fine in the preview..
Scrolling does not work in Safari 1.3.2 – while the scroll bar is moving, the content is fixed, which means that you can never see any content below.
Kaps Si
Excellently post and easy to understand.
This post has saved a lot of time. Thanks for your time to explain everything.
Natasha Banegas
The fix is to add height:100% to html tag.
Joshua Whitley
Has anyone tried using this technique to create a 2- or 3-column layout that goes beyond the bottom of the window and where both or all of the columns stretch to the same height as a “height-defining” column? I believe I’ve figured out how to do this in all browsers (no, I didn’t use faux columns or funky paddings or margins). I was wondering, Rob, if you’ve seen this before and if not, if you’d be interested in hearing my method. I read an article that said this would be the “holy grail” of CSS web design.
Joshua Whitley
I just found Matthew Levine’s article.
michael bell
I use this technique or variants very heavily, thanks to the frames without frames article published (and cited) a while back.
Be forewarned: VERY rarely, and usually inconsistently, Expressions can cause the IE browser to hang in an infinite loop. What appears to happen is the dimension gets calculated which causes the expression to trigger again, ad infinitum. There are some discussions of this, but I don’t have the links.
For me, it was the width being adjusted. In the end I had to pull it from the CSS,and put it in a javascript embedded in the footer of the page. I didn’t like doing so, because CSS is where it should be, but I had to. So people should be aware of this. While I was at it, I fixed the opera issues in JS too (window.opera is a good way to object sniff for opera)
Rasmus L. Knabe
Hi, i was looking for the same layout for some time ago, found the same solution with the absolute positioning of each corner, and ran in to the same problems in IE6 og earlier versions.. After a bid of work i actualy manged to find af solution that works alle the way down to IE5 in pure CSS without the need for Javascript. – Will put it online and post a link if anyone should be interessetet :-)
Rasmus L. Knabe
Hi.. Haven’t had time to write an explanation, but the code should be pretty strait forward :
) (There is a small problem with the positioning og the right side scrollbar in IE6 that i haven’t been able to solve yet, but other than that i works as a charm as far as i can se :)http://www.einventions.dk/kongknabe/frameset_layout.html
Paul O'Brien
Rasmus – see my post 54 :)
Rasmus L. Knabe
Sorrey.. Missed your post :-)
Jeremy Livingston
Does anyone know of a way that I could achieve a similar effect using the “em” size unit?
I would like my header to be able to fully encapsulate its text, regardless of the text size the user has chosen.
Neil Craig
I noticed that plenty have reported the problem with absolutely positions containers that incorrectly size containing DIVs with 100% widths.
I found that it no scrollbar appears in IE7/Win, FF2/Win, O9/Win, NN9/Win, S3/Win.
The problem I’m experiencing is that I cannot set the height of DIVs to 100% in IE7/Win. It works in all the above mentioned browsers.
Have anyone got a solutions for this problem?
LeMel LeMel
Thanks for taking the time to write this great, clear article.
I’ve done this layout using pure CSS, but using individual BORDERS (as an earlier commenter noted) as if they were margins or padding. The neat trick he didn’t mention: you can set BORDER-COLOR to TRANSPARENT so no need to match background colors or designs. 100% fills the remaining calculated width. You might have to keep an eye on your z-index layering when constructing to prevent mouse events from being captured in the wrong DIV.
Liam Donnelly
Whilst your CSS is clean and effective I thought I should point out a few difficulties that it exposes.
Firefox has a well known and long established print bug exposed by the use of absolute positioning – content is curtailed, usually to a single page.
Firefox mousewheel navigation (the autoscroll feature) is also broken.
Neither of these may be considered show stoppers for some but developers might like to be aware of these issues.
Oaktown Developer
It looks like #main style is supposed to be the style for <div id=“right”>??
Graham Armfield
Whilst the solution is neat and taught me things I didn’t know, I do have a worry about those users who can’t use a mouse for some reason.
As exampled it seems impossible to get the DIVs to scroll down using keystrokes. It seems to me that a sighted user who cannot use a mouse would be unable to access the text at the bottom of both the DIVs.
In a similar layout with frames tabbing would give focus to each frame in turn, and then the up and down arrow keys would scroll the individual frames.
Does anyone have any suggestions?
Brent B
I really enjoyed the article.
One issue I’m having in IE7 is getting a nested DIV to respect the calculated height of the parent div. In Firefox, setting the height property to 100% yields the desired result; that is, a div that consumes the entire height of the underlying element. In IE7, the height is ignored, presumably because the element’s height is calculated rather than specified in CSS.
If someone has a workaround, I’d be grateful for tips.
david calvert
Great article rob. Very clear and concise, eays to follow. Good job.
Ivan Ivanic
Thank you very much for this article. It solved me a month of headache.
gday
Love this technique. Had no idea this was possible. TY!!!
DCkat
The layout I’m stuck with has three fixed width columns. For over two years I have tried different ways to get IE6 (may it someday RIP) to extend the background of the right and left columns all the way to the bottom of the center column (where the varying height main content is). I don’t even have (or need or want) scroll bars.
Maybe there’s an expression-free method to accomplish this somewhere out there, but I haven’t been able to find it. I’m just glad this approach works perfectly for my purpose.
Thanks for taking the time to track down and explain a classic head-scratcher to this non-expert.
gael
Thanks, even if we’re seeing IE6 fade away, it is still very much a reality with Asian users.
I have been looking for a cross-browser option of pinning a div to the viewport’s height, preferably without the use of jquery or equivalent.
This is brilliant.