Log in

View Full Version : Will this 100% layout fail?



sandyk3
04-12-2008, 05:12 PM
Hi Everyone,
I've been just lurking and learning, hope you don't mind. I have seen thousands of questions about getting a 100% height on two or three columns no matter how much content is in that particular column. I found this.. I love alistapart:
http://www.alistapart.com/articles/multicolumnlayouts

Last night I tried all of the ways and I do understand how I got the end results, which is not all the time. I have posted my tries here:
http://sandysdesignline.com/divtest6.html

(interchanging the "6" for 5, 4 and 3).
I am also in the process of putting them all through browsershots.org:
http://browsershots.org/http://sandysdesignline.com/divtest6.html

I am wondering if any of you think that this layout - using the border method will fail and why it might fail. I would appreciate any feedback from anyone. Just so you know, at the time of writing this, browsershots is not finished so if there is a fail on the pages when you view it, please don't think I've seen it yet.

Thank you!

Sandy K

Nile
04-13-2008, 12:22 PM
Well, the colors don't beld together which is one thing, but theres also all this white space, bring an image in, maybe for a background. And I don't like how the red is overlapping the blue.
Hope this Helps,
Nile

Medyman
04-13-2008, 02:06 PM
Well, the colors don't beld together which is one thing, but theres also all this white space, bring an image in, maybe for a background. And I don't like how the red is overlapping the blue.
Hope this Helps,
Nile

@Nile
I think that the OP was asking about the CSS not for a critique on the design. I doubt the colors have any thought behind them. I often also use highly contrasting colors when putting together an initial prototype of layout. It doesn't make sense to deal with the nuainces of color until you have the layout figured out.

@Sandy
That technique will work fine. It's my preferred technique to achieve three column layouts (as well as the faux column technique if dealing with image backgrounds).

sandyk3
04-13-2008, 03:23 PM
Thank you Medyman. Yes, you are right, I am not concerned about the colors one bit. This was a test of a technique. I found a good tutorial on the holy grail but have a couple questions. First, here it is in browsershots:

http://browsershots.org/http://sandysdesignline.com/holygrail.html

And here is the page itself:
http://sandysdesignline.com/holygrail.html

MSIE 6, 7 and 8 all have problems - I know, I know.. your surprised right? MSIE 5.5 has issues too, but I'm not too worried about that. How do I fix the issues with 6, 7 and 8?

I was also doing this tutorial very slow, step by step and viewing after each step so I could learn what made the difference and it really didn't change until I added:

#container .column {
padding-bottom: 20010px; /* X + padding-bottom */
margin-bottom: -20000px; /* X */
}

Can you explain to me why this code makes it all work? Is this the same technique used with the border in my first post?

And I do understand the technique of inserting and image starting in the leftmost column - ending with the last column - LadynRed helped me understand that technique.

Thank you for looking at this for me. I'm the kind of person that just cannot accept that this code works.. I really need to know how and why.