controlling the Height of a <div>

[ColMatrix 0]

Hi I am currently having trouble on how to control the height of a <div> tag.I have <div> tags seperating the page. I want the left <div> to increase its height...no matter how far the content (<div> which is to the right of the left <div>) go to the bottom...but without going too far to make the vertical scroll bar appear (IN the left <div> is a <list> tag for navigation purposes).Some tests:value-Auto...only makes the div go just past the <list> tag.value-100% does not extend when the page extends (due to content)value-em will chnage too far when I increase the text or wont extend with the content.I need it ro resize with the browser aswell, eg 800x640 and 1024x768 but to grow with the <div> on the right (content).Hope that explains the issues, Any help, suggestions would be much appreciated!Col

[Err 10]

<style type="text/css">div {  height: 500px;}</style><div>Div Content</div>

OR

<div style="height: 500px;">Div Content</div>

[ColMatrix 0]

Thx for replying, The problem I would still have, is when the user changes their screen resolution, The left div would stay at 500px heigh, and not an 600px or 1024px (depending on user res) I have tried in % and it not work...and if I use ems it not change anyway and gets bigger (too big) or smaller when I enlarge the text...Any ideas?Cheers Col

[Err 10]

Have you tried using Tables? It could help reslove that issue. Just a thought

[jorge 0]

Could it be resolved using the "overflow" property in the div? There is an example of how it works in this url:http://www.w3schools.com/css/tryit.asp?fil...trycss_overflow

[~Shinta 0]

Percentages are the way to do it.

[johnmendel 0]

depending on user resolution is something which i looked into when i started. you could use the screen, i believe, item for IE. I think i might also work in FF. my java script is horrible, but it would look something in this nature.

/* returns a boolean */<script type=javascript>function isSmall(){ return (screen.height < 768);}</script>then, (watch me really kill this code)<script type=javascript>function chooseCSS(){ if isSmall()   somehow link that css sheet for under 768. I know its possible else   /*their res height is 768 or more*/   include the sheet for over 768}</script>

I missed alot of the magic inbetween, but thats the basic concept. BTW, you run chooseCSS on body's load.