SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Feb 2005
    Posts
    311
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    fluid css for threaded comments

    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?

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  3. #3
    SitePoint Addict
    Join Date
    Feb 2005
    Posts
    311
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    haha

    Beautiful!

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

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,379
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by csswiz
    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

  6. #6
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •