Re: [css-d] two variable width divs side by side
Paul Sommer wrote: 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. It's happening because as the table widens, the div containing it widens - and the browser drops it when it won't fit in the window anymore. Can you leave off the right column div - use margin or padding to move the data table to right enough to clear the left column? Then, as the table widens, the visitor should get just a horizontal scrollbar (which I presume wouldn't bother them). For this page, could you consider a design that puts the menu horizontally above the table, thus giving your the full width of the window to display the data table? -- David [EMAIL PROTECTED] authenticity, honesty, community __ 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/
[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
On 23/05/07, Paul Sommer [EMAIL PROTECTED] wrote: 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 Please help me, as I'm totally frustrated and considering giving up table free layout. 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 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/
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/
Re: [css-d] two variable width divs side by side
Paul Sommer wrote, On 23.05.2007 20:58:
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.
Not sure if I got the problem, but perhaps something like that - uses
position instead of float to avoid problems with too wide table
(untested just to give you an idea) assuming a solid background-color
for the menu column.
div id=container
div id=menu/div
table/table
/div
/div
#container {position: relative; border-left: yellow solid 20em;
background-image: ...}
#menu {width: 18em; position: absolute; left: 1em; top: 0;}
anything else you didn't mention? ;-)
Gruß
Susanne
--
http://sujag.de - Webentwicklung und -beratung
10119 Berlin, Tel: 030 - 440 483 47
* CSS-Referenz für den Schreibtisch * CSS GE-PACKT - mitp
http://mitp.de/vmi/mitp/detail/pWert/1620/titel/CSS%20GE-PACKT
__
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/
