Hi, I'm currently working on a new layout which I want to have in page filling proportions. The design is almost done, however there are two div's that simply refuse to become 100% height. The following page is what I'm working on: http://www.dvolve.org/test.htm What I want is that both the "content here" and "navigation here" div's to snap to the bottom of the page. In other words, fill up the rest of the page. If either one of these div's has more content in them the entire page can scroll, I'm fine with that. Hopefully my explanation makes sense and someone can help me. If you have any questions please go ahead and ask! Cheers, -devnl
In strictly CSS, what you are asking to do is not generally considered practical... There are three approaches for doing it. First is a absurdly large bottom padding with an equal sized bottom negative margin - this technique can cause all sorts of issues and required tons of hacks to work cross browser, so I don't advocate it's use. The second method is to revert to using a table for layout. Of course we aren't supposed to be using tables for layout so that's right out the door. The final method is what is known as faux-columns. You use a tiled background-image to 'fake' the appearance of the columns stretching to full screen height. It's easy to implement, requires no hacks - It really is the way to go. Of course, you appear to be using a table for layout and have about three times as many DIV as are needed in such a layout, so you have already 'overcomplicated' the design... much less that form with the non-existent attribute being a real head scratcher (Whiskey tango foxtrot is 'runat'?!?) Hang on, i'll do a quick writeup that I think will do what you want.
alright, here's what I came up with: http://www.cutcodedown.com/for_others/devnl/template.html as with all my examples the directory: http://www.cutcodedown.com/for_others/devnl is unlocked so you can grab the bits and pieces. Valid XHTML 1.0 Strict, would be valid CSS if not for the IE6 workarounds and the FF2 support, tested working in IE 5.5, 6, 7 & 8, Opera 9.64 and 10 Beta, FF 2 & 3, and the latest iterations of Safari and Chrome. Pretty simple, just use a little image on the body to fake the column appearance, and poof, end of problem. I also padded the bottom of each sub-section to make room for adding a footer, and tossed some min-width code as well.
Nevermind the runat attributes, they're needed in .NET web application development ;-) Either way, I'm going to try this out tomorrow morning, see what I can do. I'll probably tinker around with it a bit because I don't really need a footer. A million thanks for the help though!
The other way is using what is called nested layout, but it really needs some calcualtion .colmask{ width: 100%; float: left; overflow: hidden; position: relative; background: #b4d2f7 } .colleft{ right: 76%; float: left; width: 100%; position: relative; background: #6699cc } .col1 { width: 74%; left: 101%; overflow: hidden; float: left; position: relative; } .col2{ width: 22%; left: 3%; overflow: hidden; float: left; position: relative; } <div class="colmask"> <div class="colleft"> <div class="col1"> right<br>right<br>right<br>right<br> </div> <div class="col2"> left </div> </div> </div>
You can refer to the link www.dynamicdrive.com/style/layouts/ Actually there are many ways to solve the "two equal height column" problem, including js, css and hacking solutions .