View Full Version : Pre-empting a list container's width

10-24-2011, 04:19 AM
Hi there,

I have the following problem.
I have a set of nested lists populated with content selected from the site page. Each selection may have different depths of nesting within the list tree structure due to database content.

My problem is I would like to be able to have the list within a containing div forming a bordering box (with background) that auto resizes with whatever depth the user has currently chosen to appear. I am having difficulty as a circular problem arises with word wrapping or width overflow. Of course the height adjusts just fine but the width doesnt.

Is there any way of calculating the width needed for the list to size it's container (without presentation problems leading to an incorrect width from a poorly sized container?) Or may I have missed a simple css property that would solve this issue completely?

I chose the css forum, because the latter answer would be of much greater benefit to me.

Please help,

10-24-2011, 06:35 PM
Are the lists (and/or list items) floated?

Really, to best answer this we should get a look at your actual page. Do you have a live test page up and viewable?

10-24-2011, 07:04 PM
Unfortuneately no test page yet, Im in the middle of writing my own javascript "blind" style transitions for the lists. Since the db is only on my localhost with xammp its a little complicated at the mo.

Bear with me here...

If I use "getOffsetWidth" for the master list I run into a little trouble ...

I think the easiest way (javascript fix) is to have two nested divs, the inner with its width set to something outrageous like 1200 px.
The outer div can have overflow hidden, and the list can be placed into the inner div, allowing me to read getOffsetWidth without problems from wrapping. I can then use this to set the width of the outer div, which will have the background and border formatting.

I want to be able to use my blind effect on the outer div aswell, as the nesting increases or decreases.

I have a couple of local files using these nested lists with my javascript file(s) but before I iron out the bugs I would like to see if there is an easier way before I alter my js.. 9/10 bugs occur with this presentation problem, not the js itself.

The biggest bug is the container of the list causes inner nested lists to wrap, (but only by 1 or 2 pixels) I can fix this by increasing the padding of the container,.. but then getOffsetHeight in my transitions still believes the entries wrap - I end up transitioning the height to twice its proper amount, leaving lots of whitespace.

As I said,.. a little buggy. Plus, Im no expert at css or js.

Are the nested divs the way to go?