Can not stretch the css divs 100 % vertically and

Question

I am trying to convert my table design to css div design.

What does not work:

1.) The black div will have list items therefore I need scrollbars which is shown at the moment. Thats fine. But I do not want to limit the height to 400px. My former design had 100% for the height so it takes all vertical space on the screen.

2.) The red div (rightContent) should have a fixed width of 200px; When I set this what do I have to set, that the leftContent takes all horizontal space.

Above all in the old table layout were no outer vertical scrollbar visible around the whole layout.

I tested this on IE9

http://jsfiddle.net/pEMwP/4/

Answer 1

For Question1: If you want a scrollbar, you should not set the height property to auto. Instead you can dynamically set the Div height via Javascript like this.

document.getElementById("ListData").style.height=<your Size>;

For Question 2: If you want to set height to Red Div. You can specify like this.

height: 200px;
overflow:hidden;

this will limit the div to 200px. Now you can increase your other div/divs width to occupy this space .

Answer 2

If I was starting something like this from scratch I'd rethink the layout so I didn't have such tight constraints, but as you're converting an existing site I appreciate this might not be an option.

You could use the display: table;, display: table-row; and display: table-cell; declarations to get a semantically correct (it's not tabular data, right?) structure which behaves just like the oft misused <table> of yore. Admittedly, you'd have to implement some work-around for IE6&7 (probably 2-3% of users), but perhaps you could accept that it's usable but imperfect in those browsers?

http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/