----------------------------------- Jerrik Fri Nov 14, 2008 2:28 am Site Layouts ----------------------------------- I was wondering if anyone had any good resource for site layouts using CSS and tags? I'm currently building a template for my site, but I run into a lot of problems. Every template I've found, even ones found in my Dreamweaver fail in some way. I'm looking for the following setup: . ----------------------. | Header | .-----------------------. | | | | | | | | | C1 | C3 | C2 | | | | | | | | | .-----------------------. | Footer | .-----------------------. C1 and C2 are a FIXED width. C3 gets 100% of the remaining space. The header and footer also span 100% of their space, and have a variabled height. The difficulty with this design, is that I can't figure out how to make all three columns C1, C3, and C2 span the entire height of the longest column. Here is something that keeps happening: . ----------------------. | Header | .-----------------------. | | | C2 | | | |______| | C1 | C3 | |____| | | .-----------------------. | Footer | .-----------------------. This is how the browser renders it when you have C2 to be really short, and C3 determines the height (imagine it filled with content). Does anyone have any ideas? I'm willing to try them and test them. ----------------------------------- Vertico Fri Nov 14, 2008 8:22 am Re: Site Layouts ----------------------------------- If C1 C2 and C3 are not connected in anyway, or have equal amount of presented objects they wont naturally stay the same height. You could just give an outer div for each height:100%; and that should work. You may need to throw in a vertically aligned top as well. or If they are in a table, then all three col will stay the same height, then just make sure that each col is vertically-aligned:top. Though you may not want to use a table for certain reasons. ----------------------------------- Zren Fri Nov 14, 2008 8:26 am Re: Site Layouts ----------------------------------- This is kinda a trick and not really a full out proper way to solve this with CSS. If C1 & C2 are inside of C3 (like how it appears in the second figure) then you can make C3's background image to incorperate the background colors of C1 & C2. Eg IMG file: ███████████████████████████ ----------------------------------- Vertico Fri Nov 14, 2008 8:28 am Re: Site Layouts ----------------------------------- http://www.ejeliot.com/blog/61 This site has a few work a rounds you can try. ----------------------------------- md Sat Nov 15, 2008 12:24 am RE:Site Layouts ----------------------------------- just set clear: both in your footer, make C1 float left, C3 float right, and give C2 the appropriate left and right margins. header left middle