Jinsan if I might at least endeavour to assist : CSS positioning is best not conducted by endless trial and error. It might be good to consult alistapart on two column schemata and faux columns . It will save you and us a lot of grief.
Thread Starter
jinsan
(@jinsan)
Ok and could someone who doesn’t have their ego wedged between their anal region please help assist.
Root, your comments as ever are (as on countless times you have endeavoured) to be a bit anal and less than helpful. As I asked you before, if you have something to provide that would help aid in a solution then I’m all ears, but if you feel the need to stick your oar with a berating comment then kindly do so in front of the mirror, where such comments are best left.
I don’t always understand a problem and I am learning as I go along – we all start somewhere, so stop being so arrogant.
There are a couple ways to do it via css (and I’m not sure which would be best for you). The way I tend to solve this is to use absolute positioning for the section to be worked on, and define the height by distance from the top and bottom. So, it would go something like this:
.sidebar
{
postion:absolute;
top: 10px;
bottom: 10px;
}
(Including, of course, all the other information you need/want to affect the sidebar.) This will cause the box to stretch so that it’s always 10 pixels from the top and bottom of the area it’s in. There are some problems inherent in this solution, such as how it reacts to different sized windows, but it works fairly well for most situations that I’ve found.
There’s also the “height: 100%” option, but I seem to recall that has some odd problems, as well.
Or, if you’re using a fixed-width layout (which it appears you are), you can cheat, and make the backround of the main area match the the background of the sidebar and do a “repeat-y” so that when your sidebar ends, the background shows through and makes it look like the sidebar continues. I know, not exactly the most elegant of solutions, but it *is* a solution. 🙂
It is very difficult to advise people effectively on CSS positioning without getting the two column float down really neatly yourself. I have given a good reference – there are plenty if you read them – you know very well where they are. And if you think that is a bit obscure – or anal – you could fit one of my two column templates.
Thread Starter
jinsan
(@jinsan)
thanks for the comments guys – i’m going to leave this for now as it’s taking a fair bit of my time to understand, I just don’t have a knack for this…yet but I’ll practice and try to understand it better
@blazemiskulin. Well that is fine and dandy do. But as you say
There are some problems inherent in this solution, such as how it reacts to different sized windows, but it works fairly well for most situations that I’ve found.
In short that code wont work. Why not ? Because the container in which your position absolute is sitting is itself of variable height . That is the core and fundamental specification for blog design. Adding faux columns will only compound the mess. Sorry.
@jinsan – I didnt mean to sound harsh – but my answer is about using this forum properly. And this question and all its variants have been answered countless times.
Thread Starter
jinsan
(@jinsan)
@root np and fair comment
Okay, I’ve searched this forum as best I could and am still unable to get the sidebar to extend to 100% in any browser that I have.
I am running WP1.2.2 with a modified Pollux that uses percentages for widths of columns. The html validates and the css validates (except for a couple of IE hacks) So… let’s forget about IE for the moment. Is there a way that I can get the sidebar to extend to the full length of the page?
I’ve looked at a list apart and htmldog.com and while the background image method to do a faux definition the sidebar length seemed promising (of course, I cannot find that page now!!), I don’t think it will work when percentages are used.
I have also looked briefly at the coding for this forum but cannot see how the dark green sidebar has been extended to reach to the bottom of the page. (or can I?) Here’s my problem. The two columns I have are the same colour. But I would like to divide them with a narrow border. If I put the border on the left of the main section, it doesn’t reach all the way over to the sidebar.
So… at the risk of incurring the wrath of those who have answered this question and its variations over and over, how is this 100% height for the sidebar achieved?
I’m a little reluctant to put my wp URL here in this forum. But if it’s really necessary, let me know.
I have tried height:100% for the sidebar and I have also tried blazemiskulin’s method. Neither make any difference whatsoever.
And if I’m reading you correctly, Root, you are saying it can’t be done….
Now you my friend are introducing an extremely interesting variation to the problem. To summarise you want a flexible percentage based layout and are wondering how that fits with faux columns which are fixed width. You are spot on. Its very difficult and faux cols wont do it. If you insist on having the menu background going all the way down it requires great reading of the oracles at W3C and the CSS specification. I know the solution but I have never implemented it and could not possbly explain it. But there is one there involving overflow hidden for the bg tile.
“great reading of the oracles at W3C and the CSS specification”, eh? Oh oh. One of the problems I have with W3C is that it appears to be written in Greek.
I was just looking again at
http://www.alistapart.com/articles/fauxcolumns/
and it most definitely is not going to do the trick.
One of the greatest problems I’m having is isolating the various divs and containers to find out WHAT to modify. (I’m too lazy to actually come up with a format from scratch….)
Root, can you point to the specific areas of W3C and CSS specs where you have discovered the solution that you know, but have never implemented? Or perhaps a little hint at what keywords to use to google for this elusive solution?
Excuse me for replying to myself.
Okay, I’ve done a little more investigation on this background image thing to make a faux column. And it looks like it DOES work. Thanks, Root, for pointing to the very useful site alistapart.com (especially http://www.alistapart.com/articles/fauxcolumns/)
I have set the side menu to 30% width. The divider image is a vertical line (bar.gif) that appears between the content and the right sidebar.
code:
#rap {background:url(bar.gif) repeat-y 71%;}
#menu {width:30%;}
#footer {background:url(bar.gif)repeat-y 71%;
border-top:0;}
.credit {background:url(bar.gif)repeat-y 71%;}
/* IE hack that does not validate but appears to work for IE6 */
*html #menu {width:27%;}
(end code)
(Of course, now that I’ve achieved it, I’m not sure I like the results… heh.)
Well here is the proper way of doing it apparently faux-columns-for-liquid layouts Good luck. 🙂
Thanks, for the link, Root! You are brilliant for finding it in the maze of available sites. (What keywords did you use in your search?)
I’m very pleased to say that the solution outlined at faux-columns-for-liquid layouts is basically what I blundered upon all by myself. (*patting myself on the back*) But that page has a much better explanation than the little code snippet I put in on the post above….
Thanks again for the help. :^)
