One of my projects involves creating family trees using CSS and unordered lists. It works great, except when the tree is wider than the screen, causing it to wrap awkwardly. To solve this issue, I implemented the following CSS:
#treewrapper {
margin: 10px; padding: 20px; width:auto; white-space:nowrap; overflow-x:scroll;
}
#tree {width:5000px;}
Unfortunately, this results in a huge #tree area even when the tree is narrower than the #treewrapper. My initial idea was to use JavaScript to adjust the width of ul.tree based on its content width after rendering. However, it seems that the ul element width is calculated as the width of #tree minus the padding.
Setting #tree's width to auto still causes wrapping issues when the screen is narrow. Is there a way, either through CSS or JavaScript, to dynamically adjust #tree's width to fit appropriately?
You can see a live example with #tree set to Auto at