0

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/

Elisabeth
  • 20,496
  • 52
  • 200
  • 321
  • This may help for 1) http://stackoverflow.com/questions/4075440/dynamic-height-for-div – Sweet_Pete Jun 11 '12 at 14:13
  • And just so I'm clear, you're looking to get the purple, yellow, black, and orange fields to take 100% of the window width? – Sweet_Pete Jun 11 '12 at 14:22
  • purple,yellow,black. orange not. I did height:auto but then no scrollbars are visible. because the div stretches down into the browser. – Elisabeth Jun 11 '12 at 14:25
  • For 'height-auto', you'll need to set a 'height-max' to set when your scroll bars will pop up. This still sets a limit to height but if at least you won't get a big blank space if there is little text in the black field. Also, where should the orange field be in relation to red? To the left or on top? – Sweet_Pete Jun 11 '12 at 14:38
  • the orange div should be to the left. Should I set the height-max on the black div,but what px should I set, I do not know its max height. – Elisabeth Jun 11 '12 at 14:44
  • I do NOT want to use max-height because this will fix the height of the black div. When I resize the browser window and increase its height, the black div should increase too. – Elisabeth Jun 11 '12 at 14:56
  • Hmm, you're going to have to make a design decision as to what height you like the scroll bars to appear. I used 350px in your code above and it looked ok. If you feel that you don't necessarily need scroll bars then you can just leave it on auto. – Sweet_Pete Jun 11 '12 at 14:56

2 Answers2

0

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 .

Mohankumar Dhayalan
  • 46
  • 4
  • come on no javascript! and why should I set my height to 200px to make the horizontal space working? Please read my question again. – Elisabeth Jun 11 '12 at 14:56
0

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/

Ola Tuvesson
  • 5,062
  • 2
  • 28
  • 37