Menu And Content Div Larger Then Screen Size

[remcopoelstra]

Hi,I'm trying to make a webpage, which contains a menu left (fixed) and a div at the right, containing a table. Very simple you might think.The table is always larger than my screen, so I need scrollbars. The menu should occupy as much space as it needs to accomodate a drop down list.Somehow I can't get this to work in CSS, since everything is variable. I get it to work by making the menu div fixed and, when the document has loaded, adjusting the margin of the table div by javascript. You can see a working example here:http://remco.beryllium.net/index2.phpI like the way the page works now, I just don't like the way I solved it. Especially not, becuase a stylesheet for print-type media does not work, due to the margin setting being changed by javascript.How can I get this same behaviour in pure CSS?Thanks in advance,Remco Poelstra

[Ingolme]

You should pass your code through the HTML validator:http://validator.w3.org/check?uri=http%3A%...et%2Findex2.phpIf your page isn't valid it's going to be very difficult to get things to work properly on all browsers.You should re-learn HTML at the W3Schools HTML tutorial. Your code looks it was made by a developer 12 years ago.

[remcopoelstra]

Hi,Thanks for your reply.You got it quite right. I learned HTML some 12 years ago and did nothing with it all those years. No I've this frontend I've to make and I've to learn a whole lot of new technologies at once!Well, I updated the code, to validate and hopefully to look a bit less 12-years old. There is probably still a lot to improve.Adding the DOCTYPE broke my javascript. I don't know why, but it leaves me with two examples now:Working, evil and Cleaner, not working.The first is the old one, which works (in FF3.5.3, that is). The second is the one that validates, but where javascript doesn't work any more (so I commented it out). Since I want tot get rid of that javascript, that should not really be a problem.Kind regards,Remco Poelstra

[Ingolme]

OK, now, the solution is simple.The content on the left goes in one column, the content in the right goes in another:

<div id="left">Filter by: ......</div><div id="right">  <table>	...  </table></div>

In your CSS stylesheet you will apply this CSS:

html,body {  height: 100%;  margin: 0;  padding: 0;}form { margin: 0; }#left {  float: left;  width: 180px;}#right {  margin-left: 180px;  height: 100%;  overflow: auto;}

What I'm doing is creating one box on the left to contain the form, and another box that will be placed right next to it that will have scrollbars.Your stylesheet looks so empty, you should remove all presentational tags and attributes (like bgcolor or align)and substitute them for CSS equivalents.

[remcopoelstra]

Thanks for your reply.The problem with the solution you provide is that if the width of the form changes (different content in the select boxes), than the width of the left column isn't correct any more. I do not know before hand what will be in the select boxes, since it's taken from a database. Would it be possible to have the width of the left column adapt to the form?Kind regards,Remco Poelstra

[Ingolme]

Thanks for your reply.The problem with the solution you provide is that if the width of the form changes (different content in the select boxes), than the width of the left column isn't correct any more. I do not know before hand what will be in the select boxes, since it's taken from a database. Would it be possible to have the width of the left column adapt to the form?Kind regards,Remco Poelstra

You can remove the width property from the left column and margin-left property from the right column and it should give you good enough results. Adding height: 100% to the left column should help too.

#left {  float: left;  height: 100%;}#right {  height: 100%;  overflow: auto;}

[remcopoelstra]

You can remove the width property from the left column and margin-left property from the right column and it should give you good enough results. Adding height: 100% to the left column should help too.

#left {  float: left;  height: 100%;}#right {  height: 100%;  overflow: auto;}

Great! That works indeed, wondering why I didn't get to this when I was trying around.Why is it actually that this works, but if I remove the float property from #left and add a float: right;, that then the table will move to below the left column?

[Ingolme]

Great! That works indeed, wondering why I didn't get to this when I was trying around.Why is it actually that this works, but if I remove the float property from #left and add a float: right;, that then the table will move to below the left column?

Because a floated element will only go next to content that follows it, not the content that precedes it.I think it's better to not to change from left to right. Using float on the smaller box is usually a better option.