Can Not Stretch The Css Divs 100 % Vertically And Horizontally

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

Solution 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 .

Solution 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/