Mon, 2006-01-16 13:47
Hi I'm new to this forum, so be gentle with me please 
)
I have been trying to implement the equal columns layout found at,
http://www.positioniseverything.net/articles/onetruelayout/equalheight
on a voluntary site I maintain and all was going well until I created a Table of Contents on one of my pages. At this point I discovered that my attempted to implement this layout was flawed. The problem raises it's ugly head when ever I activate one of the in page links, linking to a document fragment further down the same page. As soon as the in page link is activated, the layout fails and the top of the content contained in the wrapper is sliced of and there is no way to scroll back to the top of the content.... hope that makes sense...lol
Any how the page can be found here, which will be changed whether I find a solution or not. So don't rely on the problem being here for ever
http://www.ousani.org.uk/ctr12.php
To save you all having to wad through my flaky code I have created a sample page, which follows the original layout more closely, here (and I will leave this page here to demonstrate the problem, long after the live site has been changed)
http://www.carjen.co.uk/equalcolumns.htm
Try using the ToC in win IE 6 or win FF 1.0.7. I haven't tried it on a Mac yet but if it fails on a win IE 6 and FF, then there is not much point (IMO)
Thanx in advance
Cheers )
Mon, 2006-01-16 15:46
#1
CSS equal columns problem
Interesting problem, at this stage I'm not sure that it is directly related to the equal height technique, but I would say that when I implemented it as a trial for a three column fairly complex layout I ran into lots of problems with it, and had to fall back on tried and tested faux columns, being left with the impression that while an interesting technique it's one of those techniques that's great in theory but prone to unforseen problems with certain layout configurations.
However more importantly at this stage you seem to have a problem with your closing #container2 div as it's not actually closed but opening I would fix that up first then see if the problem persists then it will be worth looking at in more detail.
Hugo.
Mon, 2006-01-16 18:44
#2
CSS equal columns problem
Hugo wrote:
Interesting problem, at this stage I'm not sure that it is directly related to the equal height technique, but I would say that when I implemented it as a trial for a three column fairly complex layout I ran into lots of problems with it, and had to fall back on tried and tested faux columns, being left with the impression that while an interesting technique it's one of those techniques that's great in theory but prone to unforseen problems with certain layout configurations.
Hugo.
I've been banging at this one for a while now and I am coming to the same opinion as your good self... it just ain't worth the hassle
Hugo wrote:
However more importantly at this stage you seem to have a problem with your closing #container2 div as it's not actually closed
Hugo.
Oh my gawd!!... the shame <blush> I took the time to validate my sample page but I just assumed that my live page was alright but with all the fiddling I've been doing these past few day </blush>
In my defence though, the tag was closed but for some reason the validator took a dislike to it. So I deleted the closing </div> off and re-typed it and the validator loved it.... but I will be doubly careful next time..... honest<g>
Hugo wrote:
but opening I would fix that up first then see if the problem persists then it will be worth looking at in more detail.
Hugo.
The problem is replicated in the sample page, which does validate. And now that I have corrected the closing tag problem the bug still seems to be there.
Thanx for taking the time hugo and if I find a solution, I'll post it here.
Cheers
)
Mon, 2006-01-16 18:53
#3
CSS equal columns problem
Hugo wrote:
Interesting problem, at this stage I'm not sure that it is directly related to the equal height technique,
Hugo.
Sorry Hugo, I missed this bit in my reply.
If you remove either the overflow:hidden; or the larger padding and margin settings the problem goes away.
The code in the sample page has very little in common with my live site. The only common element between the two pages is the larger margins, padding and the overflow:hidden;. SO at this point I pretty sure it is the equal heights technique... although I would be happy to be proven wrong!
Once again Hugo, thanx for taking the time....
Cheers
)
Mon, 2006-01-16 20:05
#4
CSS equal columns problem
It is to do with the equal height technique, one thing that worries me is that of the absolute positioning and whether the overflow hidden can actually work on an element taken out of the flow as absolute is although having said that floats are technically removed from the flow, but it does nag away at me as being a possible cause of the problems.it's proving very hard to isolate the problem other than the obvious removal of the padding/neg margin as I'm getting irregular problems occurring
Mon, 2006-01-16 20:29
#5
CSS equal columns problem
Hugo wrote:
It is to do with the equal height technique,
So I'm not going nuts then <g>
Hugo wrote:
one thing that worries me is that of the absolute positioning and whether the overflow hidden can actually work on an element taken out of the flow as absolute is although having said that floats are technically removed from the flow, but it does nag away at me as being a possible cause of the problems.it's proving very hard to isolate the problem other than the obvious removal of the padding/neg margin as I'm getting irregular problems occurring
OK I've cut out the absolutely positioned column and changed it to a two column layout,
http://www.carjen.co.uk/equalcolumns2.htm
The only other thing I needed to do was to remove the display:block; from block_1 (which wasn't really doing anything any way <g>) and replaced it with position:relative because win IE 6 caused the left column to disappear without it.
Now the ToC seems to work OK in win IE6 without breaking the layout but in FF 1.0.7 it is still a mess
( Your feeling about the absolute positioning was on the money Hugo but there is still summit else causing problems... Hmmmm
I'm still scratching me head here
Cheers
)
Mon, 2006-01-16 21:16
#6
CSS equal columns problem
I'll have a look at the latest layout but in the last one (not the test case) there was a problem with tags you had a opening tag called #leftbackground that didn't have a closing tag but was balanced out by an extra closing tag right before the closing tag for the left column not that it made any difference when I removed them, but if still in there may be causing problems now.
Hugo.
Mon, 2006-01-16 21:35
#7
CSS equal columns problem
mgh93
How about this solution from -- Bullet proof Web Design book.
Mon, 2006-01-16 22:00
#8
CSS equal columns problem
jeanboucher that's a liquid faux column approach , the idea here was to attempt to get the padding /margin trick working but as I said earlier I've tried and failed and had to fall back on faux columns as I'm sure mgh93 will soon 
and that example link is a good one to follow for the liquid faux version.
Were missing something here or at least I am as I've reduced everything to absolute bare test case removing all content and links and I'm finding it impossible to hide the padding overflow which has to be wrong as it has to work under some circumstances otherwise it would not have been published don't know what I'm overlooking at the moment.
Hugo.
Mon, 2006-01-16 23:06
#9
CSS equal columns problem
jeanboucher wrote:
mgh93
How about this solution from -- Bullet proof Web Design book.
http://www.le-magicien.com/3col.html
Thanx for the link jeanboucher but as Hugo mentioned I'm really just trying to get the padding and margin trick to work, as it would answer many of the short comings css ia accused off.
Thanx for your help
Cheers
)
Mon, 2006-01-16 23:12
#10
CSS equal columns problem
Hugo wrote:
Were missing something here or at least I am as I've reduced everything to absolute bare test case removing all content and links and I'm finding it impossible to hide the padding overflow which has to be wrong as it has to work under some circumstances otherwise it would not have been published
Hugo.
I can get it to work as long as I do not try to link to document fragments within the wrapper. In the following sample page I have removed the ToC and the technique works well in win IE6 and FF 1.0.7.
http://www.carjen.co.uk/equalcolumns3.htm
Even the back to top links work because they target a position on the page outside the wrapper.
Like I say I'm at a loss 
Cheers
Tue, 2006-01-17 00:18
#11
CSS equal columns problem
Hm, I concur in actual fact you can have one link pointing to a fragment but no more than that, it looks as though the others target an area bellow the negative margin and start to cause the problems it's odd but it's something along that line it's interfering with the padding negative margin given time I'll pin point it but at this stage I would have to say that it further cements my belief that some of these tricks are not as clever as they would have you believe ; negative margins can often have little problems along the way. and if this is another problem with this technique then i'm starting to loose faith with it as being practical to use as this will be the second unrelated problem trying to get this to work effectively.
Hugo.
Tue, 2006-01-17 09:26
#12
CSS equal columns problem
Hugo wrote:
Hm, I concur in actual fact you can have one link pointing to a fragment but no more than that, it looks as though the others target an area bellow the negative margin and start to cause the problems it's odd but it's something along that line it's interfering with the padding negative margin given time I'll pin point it but at this stage I would have to say that it further cements my belief that some of these tricks are not as clever as they would have you believe ; negative margins can often have little problems along the way. and if this is another problem with this technique then i'm starting to loose faith with it as being practical to use as this will be the second unrelated problem trying to get this to work effectively.
Hugo.
I must admit I was really excited when I first heard of this technique, I even had it implemented on my site for a few weeks before I noticed the bug but my excitement has turned to frustration. And now I have come to the conclusion that this (imo) neat technique has sadly fallen foul of poor browser implementation of the specs....<sigh>
But now that I've found you guys I think I'll hang around for a bit... if no one minds that is <g>
Cheers
)
Tue, 2006-01-17 10:12
#13
CSS equal columns problem
Ok I know I sort of said that I was finished with this one but so far I have been trying to use aspects of the equal column technique, to suit my own templates. So I got to thinking that perhaps the fault was in my implementation, so I headed back over to Position is everything,
http://www.positioniseverything.net/articles/onetruelayout/combined
and copied their final example, 'Putting it all together',
http://www.positioniseverything.net/articles/onetruelayout/example/combinedfirefoxfix
Then I simply added a little content, with headings, to the centre column and placed a few anchor tags in the left column to form the ToC.
And guess what guys...? It still fails (
http://www.carjen.co.uk/equalcolumns4.htm
I know the positioning looks a little off but I purposely didn't want to change any style rules, so everything is as the author left it.
Looks like I'll have to go back to my old hacks for the left column length.... spacer gif anyone...lol
Thanx For your help guys.
Cheers 
Tue, 2006-01-17 10:54
#14
CSS equal columns problem
So you just added some very simple but reasonable content to the structure? what sort of like what we would do when constructing/ designing a site, content that would justify the code being presented as a web page and it failed! you have to sort of smile really.
My original attempt was with a three column layout, negative floats only anomalous thing was a footer placed at bottom of viewport using negative top margin at clients request, couldn't get the columns to work, I can't for the life of me remember which browser had the problem.
I still want to persevere with it when I have time but it wont be for real work.
Hugo.
Tue, 2006-01-17 11:26
#15
CSS equal columns problem
Hugo wrote:
So you just added some very simple but reasonable content to the structure? what sort of like what we would do when constructing/ designing a site, content that would justify the code being presented as a web page
To be fair though, would you have included a ToC in your testing strategy? I've still to remove these styles from,
http://www.ousani.org.uk/index.php
if you check it out, you will find that the technique works in most browsers, up until you either use the ToC on the contacts page or use the in page navigation, Go to Links, Go to main content... etc. So I could easily see how this one might have got past the author....for a few weeks their I even thought that I had a working solution to the equal column length problem.
Hugo wrote:
I still want to persevere with it when I have time but it wont be for real work.
Hugo.
Oh I think I could see myself drifting back and forwards on this topic from time to time.
By the way I dropped the guy(
at Position is everything a line and asked them to look at this thread in the hope that they can come up with a solution... supposing it gets past their spam filters that is <g> Cheers
Tue, 2006-01-17 11:42
#16
CSS equal columns problem
Your right it's not reasonable to expect every situation to be tested for so I shouldn't knock the efforts in presenting the technique, it is definitely a interesting one and agree that it in essence it does work up to a point or so it seems, but I thought that my original attempt was not stretching the technique that much.
I'll have to try and re-create that original stage of that layout and delve deeper.
If it can work I'd love it to and I'd accept limitations just as long as I was clear as to what they were.
Hugo.
Tue, 2006-01-17 12:27
#17
CSS equal columns problem
Hugo wrote:
I'll have to try and re-create that original stage of that layout and delve deeper.
Hugo.
Go on then, it'll give ne summit to do, while I avoid doing wot I'm supposeto be doing...lol
Cheers )
Tue, 2006-01-17 14:16
#18
CSS equal columns problem
That's my problem I'm a past master at avoiding what I should be doing , as is the case right now due to the fact that I know to resolve the issue is going to mean hassle, frustration, lots of tutting, maybe if I stare out of the window long enough... *sigh* no that's not worked seems I'll have to fire up the editor and face the music.
Seriously when I have a moment I'm going to play with this, if I reach any conclusions I'll post them here.
Hugo.
Tue, 2006-02-07 13:45
#19
CSS equal columns problem
Hugo wrote:
So you just added some very simple but reasonable content to the structure? what sort of like what we would do when constructing/ designing a site, content that would justify the code being presented as a web page
Hugo.
I know this is an old topic but I thougt I'd let you all know that I have tested the layout in IE 7 beta 2 and the layout fails in exactly the same way... 
Cheers
Tue, 2006-02-07 19:35
#20
CSS equal columns problem
and did you ever get any feedback from P.I.E on the matter?
I have to admit I never got round to testing this further but did manage to get a working layout using the padding/neg margin method that's seems to be holding, but it took a while to figure that height auto on my overflow hidden container was disrupting things in FF.
Hugo.
Tue, 2006-02-07 21:35
#21
CSS equal columns problem
Hugo wrote:
and did you ever get any feedback from P.I.E on the matter?
Total silence I'm afraid but then I'm not even sure my email got passed their spam filters.... a well
Quote:
I have to admit I never got round to testing this further but did manage to get a working layout using the padding/neg margin method that's seems to be holding, but it took a while to figure that height auto on my overflow hidden container was disrupting things in FF.
Hugo.
I too was able to get a stable layout, until I used a ToC contain within the wrapper.
I'll maybe come back to when time allows.
Thanx Hugo
Cheers
Wed, 2006-02-08 17:49
#22
CSS equal columns problem
my stable layout collapsed this morning with a project on an incredibly short and urgent deadline, something to do with desiring to add content to the central column, knew I was asking too much.
Footer neg margined, 100% heights, neg floated columns, overflows hidden == one unstable and unpredictable layout.
I shan't be revisiting it in a hurry, especially where a layout needs to work :roll: must just be me though as it's all supposed to work!
Wed, 2006-02-08 23:01
#23
CSS equal columns problem
Hugo wrote:
Footer neg margined, 100% heights, neg floated columns, overflows hidden == one unstable and unpredictable layout.
I shan't be revisiting it in a hurry, especially where a layout needs to work :roll: must just be me though as it's all supposed to work!
You and me both then...lol I think I'll leave it for a while myself, as I really need to get my desk cleared.
I'll pop by from time to time... cool board, well done guys!
Cheers )
Michael .H
Tue, 2006-04-11 09:04
#24
CSS equal columns problem
Hugo wrote:
and did you ever get any feedback from P.I.E on the matter?
mgh93 wrote:
Total silence I'm afraid but then I'm not even sure my email got passed their spam filters.... a well
Just thought I'd let you all know that I recieved mail back from Alex Robinson today and he informed me that he is aware of the bug and he will be publishing an update very soon. I assume it will be posted here,
http://www.positioniseverything.net/articles/onetruelayout/equalheight
although he didn't say where.
Any how's.... just thought I'd let you know.
Cheers
Tue, 2006-04-11 10:19
#25
CSS equal columns problem
Interesting, thanks for the update I shall be watching for that update with interest, as I have been concerned with some of these layouts that present problems under certain circumstances.
Hugo.
Tue, 2006-04-25 19:55
#26
CSS equal columns problem
Hugo wrote:
Interesting, thanks for the update I shall be watching for that update with interest, as I have been concerned with some of these layouts that present problems under certain circumstances.
Hugo.
I haven't had a chance to look at it yet but I will after battle star galactica <blush>
http://www.positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems
Cheers )
Tue, 2006-04-25 20:08
#27
CSS equal columns problem
Thanks for the link, only had a quick scan myself but it's clearly a bit of a mess as per, with browsers all off doing their own thing in merry fashion :roll:
Navigate to the very bottom of the page for a link that solves your problem though entitled "Avoid within-page links" 
Still leaves me thinking though that there is still one problem yet to be documented with this technique but like a fool I've trashed the layout long ago and have forgotten the circumstances that it manifested under.
Hugo.
Tue, 2006-04-25 23:11
#28
CSS equal columns problem
Hugo wrote:
Thanks for the link, only had a quick scan myself but it's clearly a bit of a mess as per, with browsers all off doing their own thing in merry fashion :roll:
It's a dam shame, as this layout had great potential (IMO) but if the spec has no guidance on the matter then we can hardly blame the creators of the borwser for doing something wrong...
Quote:
Navigate to the very bottom of the page for a link that solves your problem though entitled "Avoid within-page links"
Still leaves me thinking though that there is still one problem yet to be documented with this technique but like a fool I've trashed the layout long ago and have forgotten the circumstances that it manifested under.
I did spot another possible bug myself although I haven't properly investigated it yet, so I'm a little hesitant to mention it. I have recently been doing some work with handheld devices and I decided to access a site using the overflow: hidden technique and I couldn't load the page. The device returned the error 'out of memory', which lead me to believe that the handheld device couldn't handle the large padding and margin settings and probable wasn't respecting the overflow:hidden. But like I said I haven't test this theory properly, it might just have been my buggy code <vbg>
But for me it has become a non-issue, as I can't see myself spending anymore time on this technique. Certainly not until someone decides to include how a UA should handle scrolling on an element styled with overflow:hidden within the specs.... oh and then wait for it to be widely implimented <g>
Cheers
)
Wed, 2006-04-26 00:00
#29
CSS equal columns problem
The layout/technique did seem to offer great promise, and indeed probably does within certain defined parameters, which seems to be the problem as were all looking this elusive grail.
MS has moaned in the past about the lack of detailed test cases on properties for browsers to base there specs on and it's not helped when the it just says "oh do what you like with the margins/padding on the ul element" as you say you can hardly blame the browser manufacturers for the lack of focus and standards.
The handheld device problem sounds plausible , and if so another rather big drawback to the technique , although one would probably be serving a specific set of styles for handhelds.
Sadly I have to agree too much time can be spent with these things when eventually they all agree on and implement the specs for scrolling we'll be on CSS5.2 and have a whole heap of new techniques with which to create layouts.
Wed, 2006-04-26 09:49
#30
CSS equal columns problem
Hugo wrote:
The handheld device problem sounds plausible , and if so another rather big drawback to the technique , although one would probably be serving a specific set of styles for handhelds.
Ahhh now your into a whole other discussion regarding how hand held devices handle styles. For example not all hand held devices support the media type and then there are those which will interpret the screen and handheld properties of the media attribute (although they are getting better!).... It's another cross browser compatibility nightmare I'm afraid.
But then that is a whole other discussion <g>
Quote:
Sadly I have to agree too much time can be spent with these things when eventually they all agree on and implement the specs for scrolling we'll be on CSS5.2 and have a whole heap of new techniques with which to create layouts.
lol... only 5.2..?!
Cheers
) Michael H.
Wed, 2006-04-26 09:50
#31
CSS equal columns problem
Hugo wrote:
The handheld device problem sounds plausible , and if so another rather big drawback to the technique , although one would probably be serving a specific set of styles for handhelds.
Ahhh now your into a whole other discussion regarding how hand held devices handle styles. For example not all hand held devices support the media type and then there are those which will interpret the screen and handheld properties of the media attribute (although they are getting better!).... It's another cross browser compatibility nightmare I'm afraid.
But then that is a whole other discussion <g>
Quote:
Sadly I have to agree too much time can be spent with these things when eventually they all agree on and implement the specs for scrolling we'll be on CSS5.2 and have a whole heap of new techniques with which to create layouts.
lol... only 5.2..?!
Cheers
) Michael H.