Hope someone can help me with this problem, actually I'm not sure its even possible what I want to accomplish, but if it is, I'm sure someone here will know. I want my left column box and content box to be of equal height, regardless of the content in either box. On some pages, the left column is longer, on other pages, the content box is longer. I think having them unequal heights will look funny and throw off my page layout, especially if the discrepancy is large. I did enclose both items in another box, called 'inviscontainer'. I have made it lime green temporarily, so that I can see the area it represents. Is it possible to force each of the boxes to be of equal height? I tried to use the 'inherit' property, but I'm not sure I'm using it correctly. If what I want isn't possible, what would be an alternative? Sample pages: http://www.mscalis.com/calisportfolio/ http://www.mscalis.com/calisportfolio/greetingcards.html Stylesheet: http://www.mscalis.com/calisportfolio/stylesheet.css
You could simply make a tiny background line and set it to repeat-y. That would make the background visible on all pages independent of their div sizes.
I fiddled around with your suggestion, but I don't really understand how to do what you're saying. I'm including my link again, without the temporary lime green colored box, so you can see the layout I want. The bottom line is that the left column box and main content box don't match in height, and I can't figure out how to get that. I'd appreciate all replies, even if it is to say that what I want cannot be done.
You can't do it without a lot of hacking (overflow property and lots of padding and calculation, or javascript) The easiest way is to make a "fake" background on the element that contains both columns. Let's say you have a wrapper that has 2 columns, the left is a sidebar that has a red background and has 5-6 list items and doesn't extend down all that much. The right side is the main content area that has a yellow background and since it has LOTS of content it makes the wrapper "wrap" around it. The left side with the red background will not be the same height as the right because the right has more content. But if you set a thin background slice that has both the red and yellow backgrounds and repeat it vertically on the wrapper then it will appear as though they are equal in height. http://www.alistapart.com/articles/fauxcolumns/
Or you could just (excuse me while I blaspheme, and I'm not referring to the part I'm about to censor) say **** it and use a table should faux-columns not implement everything you want it to. (which is quite often the case) Especially since you don't seem to be using any sort of 'content first' techniques. I would also suggest taking an axe to that STUPID Adobe mm_swap javascript nonsense for a CSS 'sliding background' method.... and probably take an axe to even using dreamweaver in the first place and learn to do it properly.
Also, take an axe to that fvcking "This image is not to be borrowed and is protected under copyright laws!" when you click on anything but a direct link on the whole web page. I can print screen that image, so what the fvck is the point of adding that? Or I could just disable javascript. Hell, it's not even worth stealing.