I have a layout with two columns.
Left div and a right div
Right div has a grey background color, and I need it to expand vertically depending on the height of the user's browser window. Right now the background color ends at the last piece of content in that div. I've tried height:100%, min-height:100%; etc. Doesn't seem to work.
Help? Thanks
If you're able to absolutely position your elements, position: absolute; top: 0px; bottom: 0px; would do it.
I would suggest you the following links:
http://www.communitymx.com/content/article.cfm?page=2&cid=BAD95
You don't mention a few important details like:
Here's one possibility:
<html>
<head>
<style type="text/css">
html, body, div { margin: 0; border: 0 none; padding: 0; }
html, body, #wrapper, #left, #right { height: 100%; min-height: 100%; }
#wrapper { margin: 0 auto; oveflow: hidden; width: 960px; // width optional }
#left { background: yellow; float: left; width: 360px; // width optional but recommended }
#right { background: grey; margin-left: 360px; // must agree with previous width }
</style>
</head>
<body>
<div id="wrapper">
<div id="left">
Left
</div>
<div id="right">
</div>
</body>
</html>
There are many variations on this depending on which columns need to be fixed and which are liquid. You can do this with absolute positioning too but I've generally found better results (particularly in terms of cross-browser) using floats instead.