Hi, I am currently working on achieving the following layout using divs: In this layout I want the red parts to always be 100% high, the green parts to be a preset height in pixels and the yellow parts filling up the rest of the page height. If content in either one of the yellow parts exceeds the page height the entire page can scroll (header etc included), as long as the red columns remain their full height. Can anyone help me with this because I can't seem to get it to work as I want it to. Thanks in advance! -devnl
What are the red parts, is it a page background, or some sort of left and right column, is anything going inside there? Also what about the page width, is it going to be fixed to a certain px?
Create one large box (the red box) and put everything else inside with small left and right margins. That's what I would do. Note: You can also make two large boxes. One that contains the header and sidebars inside the slightly larger one (the red one) with left and right margins.
Use red as your body color or place all your tags inside a wrapper id, set its background-color to red, place a container inside wrapper and set margin to it like: margin:0px 5px;
What I'm trying to get done is a bit harder then that I'm afraid. The white part in my design has a gradient background and the red columns will contain a shadow that runs along the left and right of my main content part. Because the gradient stops somewhere halfway on the red columns I wanted to have the red columns contain an image of the shadow with the gradient and the rest of the red columns a background that is essentially the background color the gradient fades into with shadow. This background is then repeated for the rest of it's height. Here's an image as a reference to what I mean: http://www.dvolve.org/design.jpg The entire thing does have a set width of 1000px. The red columns will be 9px wide each with the rest filling up the remaining 982px.
Right, what is the height of the red columns, do they need to be fixed at 100% and scroll when the user scrolls down, or the height of whatever the page is, or a fixed height?
The footer should always snap to the bottom, so that the site is always at least 100% high (ofcourse when the content forces a scrollbar on the entire page the thing should scroll in its entirety). The red columns should also always be at least 100% high or higher if a scroll is needed. Does that clarify it?
While you CAN do it using div's and some margin trickery, it starts to get a bit heavy on the hacks supporting IE6 and Opera... So my advice is going to fly in the face of what everyone else is going to tell you.... Use a table. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title> baseline template </title> <style type="text/css"> * { margin:0; padding:0; } html, body { height:100%; } body { text-align:center; /* center #container in IE 5.x */ font:normal 85%/125% verdana,helvetica,sans-serif; } p { padding:0 1em 1em; } #container { table-layout:auto; border-collapse:collapse; empty-cells:show; width:992px; height:100%; margin:0 auto; text-align:left; background:#FF0; } #leftSide, #rightSide { width:9px; background:#F00; } #header { background:#0F0; border-bottom:1px solid #000; vertical-align:top; } h1 { padding:8px; font:bold 32px/34px verdana,helvetica,sans-serif; } #sidebar { width:200px; padding-top:1em; background:#EF0; vertical-align:top; } #content { padding-top:1em; text-align:left; background:#FE0; vertical-align:top; } #container #footer { vertical-align:bottom; } #footer div { padding:8px; background:#0F0; border-top:1px solid #000; } </style> </head><body> <table id="container"> <tr> <td rowspan="3" id="leftSide"></td> <td colspan="2" id="header"> <h1>Site title</h1> </td> <td rowspan="3" id="rightSide"></td> </tr><tr> <td id="sidebar"> <p>SideBar stuff</p> <p>SideBar stuff</p> <p>SideBar stuff</p> <p>SideBar stuff</p> </td> <td id="content"> <p>Some test content</p> </td> </tr><tr> <td colspan="2" id="footer"> <div> Test footer content </div> </td> </tr> </table> </body></html> Code (markup): No ACTUAL hacks, validates Strict, CSS validates. Certainly some people will give you working examples that use DIV, these are going to need to trip haslayout for IE, fake min-height in IE, deal with the opera 100% height bug, and possibly even use -moz properties or assign display:table to non-table elements... and probably use MORE markup. Then those same people will have the nerve to call using a table to divide data into rows and columns a hack. Give those people a dictionary. I normally do not advocate table based layouts, however this is a case where the table will do the job better and in less code. I colored the 'content' area two different colors for the columns so you could see the division. You'll notice the pure yellow on the table is showing through below that when taller than the content - which is our 'solution' for your border between columns (from looking at your original) - I would apply a background-image tiled on #container to add that stripe, removing the backgrounds from #content and #sidebar once you've done so. Hope this helps. You REALLY have your heart set on a non-table one, I can make one of those too, though it is less versatile since you have to fix the height of #footer.
Deathshadow, thanks for the help! I have a question though. I looked into this a bit and set the height of the #header to a fixed one (88px) which results in the header becoming, well, quite a bit bigger then 88px Also if I add another row (the blue one in the following code) and set that to a fixed 20px, it also shows up a lot bigger then it should. Why is that happening? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title> baseline template </title> <style type="text/css"> * { margin:0; padding:0; } html, body { height:100%; } body { text-align:center; /* center #container in IE 5.x */ font:normal 85%/125% verdana,helvetica,sans-serif; } p { padding:0 1em 1em; } #container { table-layout:auto; border-collapse:collapse; empty-cells:show; width:992px; height:100%; margin:0 auto; text-align:left; background:#FF0; } #leftSide, #rightSide { width:9px; background:#F00; } #header { background:#0F0; border-bottom:1px solid #000; vertical-align:top; height:88px; } h1 { padding:8px; font:bold 32px/34px verdana,helvetica,sans-serif; } #sidebar { width:200px; padding-top:1em; background:#EF0; vertical-align:top; } #content { padding-top:1em; text-align:left; background:#FE0; vertical-align:top; } #container #footer { vertical-align:bottom; } #footer div { padding:8px; background:#0F0; border-top:1px solid #000; } #bar { background:#00F; height:20px; } </style> </head><body> <table id="container"> <tr> <td rowspan="4" id="leftSide"></td> <td colspan="2" id="header"> <h1>Site title</h1> </td> <td rowspan="4" id="rightSide"></td> </tr> <tr> <td colspan="2" id="bar"> </td> </tr> <tr> <td id="sidebar"> <p>SideBar stuff</p> <p>SideBar stuff</p> <p>SideBar stuff</p> <p>SideBar stuff</p> </td> <td id="content"> <p>Some test content</p> </td> </tr><tr> <td colspan="2" id="footer"> <div> Test footer content </div> </td> </tr> </table> </body></html> HTML:
How much bigger is bigger? You did add 8px padding (all around) so it should be 88px plus 16px vertical padding = 104px.
Well, I've removed all the paddings etc, even cleared all the content in the Header div, fixed it at 88px but my header ends up being about 200px high (the red part below) for some reason. I really have no clue why that is. Also for some reason my content part isn't stretching all the way down to the footer (see the black part in the following link). You can check out the following page to get an idea of what I mean and my current sourcecode: http://www.dvolve.org/test/index.htm
My bad, been a while and my brains still a bit foggy after my recent episode. Lemme look it over - I know IE is at fault since it should work just fine in FF/Opera/Saffy...
I must be slipping... I can't remember how to make IE not do that... well, in the interim here's how to do it with DIV's... Just apply a faux-column image to #container to apply your side backgrounds and center column dividers. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title> baseline template </title> <style type="text/css"> * { margin:0; padding:0; } html, body { height:100%; } body { text-align:center; /* center #container in IE 5.x */ font:normal 85%/125% verdana,helvetica,sans-serif; } p { padding:0 1em 1em; } #container { width:976px; min-height:100%; overflow:hidden; /* wrap floats */ margin:0 auto; padding:0 9px; text-align:left; background:#F00; } * html #container { /* IE 6/earlier has no min-height, but will incorrectly treat height as such if we turn overflow back to the default... Thankfully haslayout is already tripped, so floats will be wrapped in IE anyways. */ overflow:visible; height:100%; } h1 { padding:8px; font:bold 32px/34px verdana,helvetica,sans-serif; background:#0F0; border-bottom:1px solid #000; } #sidebar { float:left; width:200px; padding:16px 0 48px; background:#EF0; } #content { float:right; width:776px; padding:16px 0 48px; text-align:left; background:#FE0; } #footer { width:960px; height:16px; padding:8px; margin:-32px auto 0; overflow:hidden; /* just in case */ font:normal 14px/16px arial,helvetica,sans-serif; background:#0F0; border-top:1px solid #000; } </style> </head><body> <div id="container"> <h1>Site title</h1> <div id="content"> <p>Some test content</p> </div> <div id="sidebar"> <p>SideBar stuff</p> <p>SideBar stuff</p> <p>SideBar stuff</p> <p>SideBar stuff</p> <!-- #sidebar --></div> <!-- #container --></div> <div id="footer"> Test footer content </div> </body></html> Code (markup): This one I actually (*** SHOCK ***) tested in IE6/newer. IE5.x it will screw up because of the broken box model - oh wells. Only real drawback is the height of the footer MUST remain fixed.
Deathshadow, thanks for all the help so far, but this div layout has some drawbacks in achieving what I want Seeing as how the entire container now has only 1 background, I cannot get my shadows to work decently in combination with the gradient. That's why the table layout was perfect (except for the weird heights). There I had different cells for the shadows which I could give their own background and put an image in to achieve the gradient shadow effect as in the link in my previous post Fixing both the header and the footer isn't going to be a problem, I'll be doing that anyway. EDIT: Better yet, if it's easier to leave out the footer alltogether I'm fine with that too.
No need for table... as far as I understand correctly what you are trying to achieve. Use a simple margin hack: http://ryanfait.com/sticky-footer/ Works in all recent browsers as far as I know (IE6+).
About red parts... just use a background image for that, or add left and right border to both wrapper and footer divs
Since you are working on a fixed width, for your shadows can't you just make the two side areas AND the content area backgrounds a single image tiled on the Y axis? Basically extend Faux-columns to apply the shadows as well... That's how I was thinking it would be handled. Do you have a image of basically what it is you are trying to do? The 'actual' images for the page, not just the simple block layout?
Because my background is essentially a gradient I cannot do a Y axis tiling background image as far as I know because the shadow would be on both gradient as the background-color. At some point the gradient stops and the background-color takes over, which I can probably never do right with a Y axis tiling BG..Here's a link to how it's kind of going to be: http://www.dvolve.org/test/index.htm
I don't see a problem there. Just put your divs inside a wrapper div. Set an Y axis tiling background image for wrapper div (to create the shadow) and use a little padding on the sides so background colors of other divs (content, sidebar) won't cloak the shadow. You really don't need table for this. I would make a quick example for you but I'm a little busy now.