fluid css for threaded comments

[lajkonik86]

So i have some threaded comments as such:

<div id="container">
<ol>
<li>First</li>
<li>Second comment
<ol>
<li>First reply to second comment</li>
</ol>
</li>
</ol>
</div>

The container has a fixed width, but I do not know which width (the system can be used across multiple sites)

I want the width of the comments to fully fill the container. However with each level the ol goes deeper I want to have a margin of 30px on the left.

Problem is that if you specify it as such the width of the comment stays at 100% and just moves 30px out of the container.

How should i specify my css to get what i want?

[DaveWoods]

You don't need to specify a width. A block level element will automatically fill 100&#37; width so just put the margin on the element and leave off the width as it'll then readjust to cater for the extra margin

[lajkonik86]

haha

Beautiful!

I switch between design,css,javascript and especially php a lot. Always need some time to adjust again

[DaveWoods]

Hehe, yeah block level elements being 100&#37; is something that's quite often overlooked and one of the things that took me a while to get my head around

[Paul O'B]

Hehe, yeah block level elements being 100&#37; is something that's quite often overlooked

Sorry to pull you up on this Dave because I know what you mean but block level elements are not 100% width they are width:auto by default.

Whether auto means that they will stretch to fill the whole available space depends on the type of element concerned.

For example width:auto for floated and absolute elements means that the element will only be as wide as its content if no specific width has been set. For static elements (inc position:relative) then the width:auto will allow the element to fill all the available space and will not overflow when borders or padding are added (unless the dimensions are over constrained of course.)

But I know what you meant

[DaveWoods]

What he said

Also worth adding that inline elements will also behave like floated or absolute elements concerning their width in that they'll only take up as much space as is needed

Thanks for the explanation Paul, it was kind of what I meant but may have been confusing