[css-d] two variable width divs side by side
Hi, I have a simple problem that I try to solve now for almost 3 weeks (not 8 hours a day but long enough) Simple, because it is solves within 5 minutes when using tables, but it seems to be impossible to do it table free. Please proof me wrong. :-) The page consists of two columns. The left column should contain a menu and has a fixed width. the right column contains a table with data from a database. The user can choose, which information of the database he wants to see. So it is obvious that the table (ans thus the right column) has a variable width. Everything works fine until the outer div reaches the right edge of the browser window. Then the right column will be placed beneath the menu instead of right from it. This is my code so far (stripped to a minimum): div style=width:auto; white-space:nowrap; border:1px solid black; div style=white-space:nowrap; border:1px solid fuchsia; margin:2px; float:left; That's the way it looksbr impossible without tables? /div div style=width:auto; white-space:nowrap; border:1px solid lime; margin:2px; float:left; table border=1 tr td11/td td22/td /tr /table /div div style=clear: bothnbsp;/div /div You can see the test page here (shrink your browser windows to see the effect) http://paul-sommer.de/test/tablefree.html This example also contains a tabled layout to show the intended behaviour. The table also shows the wanted colouring which also seems impossible with DIVs. I wonder why people are encouraged not to use tables when the alternative solution is that painful and time consuming (not to speak at all about the browser incompatibilities) Please help me, as I'm totally frustrated and considering giving up table free layout. Thanks in advance Paul __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] two variable width divs side by side
Rory Fitzpatrick wrote: Try this out for size: div style=border: 1px solid black; width: auto; float: left; div style=border: 1px solid fuchsia; margin: 2px; float: left; width: 100px; That's the way it looks without tables /div div style=border: 1px solid lime; margin: 2px 2px 2px 108px; width: auto; table border=1 tbodytr td11/td td22/td /tr /tbody/table /div div style=clear: both;nbsp;/div /div Maybe I have stripped my example a bit too much :-) Your solution works only with that simple example. The real thing has a background image attached to the right column. (please look at the extended sample here http://paul-sommer.de/test/tablefree.html ) Expanding that image to the left side is not a solution as the menu column grows if the user enlarges the font size (Ctrl + in firefox). The menu column must be sized with em (I think). Otherwise the text runs out of the box if the user enlarges the text. If you want to increase the space between the divs simple increase the margin-left value (108px - this allows for the 100px width + total 6px margin + 2px of border). Hope this helps Rory __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Sei nicht verzweifelt, wenn es ums Abschiedsnehmen geht. Ein Lebewohl ist notwendig, ehe man sich wiedersehen kann. Und ein Wiedersehen, sei es nach Augenblicken, sei es nach Lebenszeiten, ist denen gewiß, die Freunde sind. -- Richard Bach __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] two variable width divs side by side
Rory Fitzpatrick wrote: Try this out for size: div style=border: 1px solid black; width: auto; float: left; div style=border: 1px solid fuchsia; margin: 2px; float: left; width: 100px; That's the way it looks without tables /div div style=border: 1px solid lime; margin: 2px 2px 2px 108px; width: auto; table border=1 tbodytr td11/td td22/td /tr /tbody/table /div div style=clear: both;nbsp;/div /div Maybe I have stripped my example a bit too much :-) Your solution works only with that simple example. The real thing has a background image attached to the right column. (please look at the extended sample here http://paul-sommer.de/test/tablefree.html ) Expanding that image to the left side is not a solution as the menu column grows if the user enlarges the font size (Ctrl + in firefox). The menu column must be sized with em (I think). Otherwise the text runs out of the box if the user enlarges the text. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
