SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot Valera Selev's Avatar
    Join Date
    Apr 2004
    Location
    Lviv, Ukraine
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Container needed

    I need a container (<div>) that would be insured from being "crapped" by its inner items. None of the container's inners can intersect its borders, they must broaden the container.The conatainer must be of varialble width (width:auto)
    Please help me in solving this task.

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Code:
    #container {
      padding: 100px;
    }
    HTML Code:
    <div id="container">
    <div id="everything-else">
    Hello there.
    </div>
    </div>

  3. #3
    SitePoint Zealot Valera Selev's Avatar
    Join Date
    Apr 2004
    Location
    Lviv, Ukraine
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have a look at this piece of code in Mozilla:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
    Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Divs</title>
    <style>
    body, html, div, p, img, table {margin:0px;padding:0px;border:none;}
    #all {width:100%;text-align:center;}
    .content {background-color:#ffff99;
    margin-left:220px;
    margin-right:220px;
    display:table;
    vertical-align:top;
    width:auto;
    height:auto;
    padding:0px;top: 0px;}
    #innercontent {display:table;width:auto;height:auto;vertical-align:top;}
    </style>
    </head>
    <body>
    <div id="all">
    <div id="content" class="content">
    <div id="innercontent">
    <p>Content Content Content Content Content Content
    Content Content Content Content Content Content
    Content Content Content Content Content
    Content Content Content Content
    Content Content Content</p>
    <div style="width:100%;border:1px solid black;padding:10px;margin:10px">100% Width Div</div>
    		</div>
    	</div>
    </div>
    </body>
    </html>
    We've got the div with padding and margins that intersects .content div. How can I avoid this?
    Last edited by Valera Selev; Apr 5, 2004 at 09:15.

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    You can avoid it by not setting the width to 100%. 100% + 20px padding (10px from each side) + 2px border + 20px margin will always be more than 100%. If you leave off the width, the <div> will stretch accordingly.

  5. #5
    gimme the uuuuuuuuuuu duuudie's Avatar
    Join Date
    Feb 2004
    Location
    Switzerland
    Posts
    2,253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    Sorry I don't have the time to dig deeper into your code, however here is a little davice: as far as I know, this is wrong:
    <div id="content" class="content">

    with this .content
    you just need this:
    <div class="content">

    with this #content
    you just need this:
    <div id="content">

    In other words:
    '.' ---> class=""
    '#' -----> id=""

    Sorry that I can't help you more

  6. #6
    SitePoint Zealot Valera Selev's Avatar
    Join Date
    Apr 2004
    Location
    Lviv, Ukraine
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    You can avoid it by not setting the width to 100%.
    See, now I'm writing a template, which may be changed by anyone afterwards. Of course, I may assign this feature in some kind of "Developing Conventions", but still, limitimg customers in any way is not the best variant. Any ideas?

  7. #7
    SitePoint Zealot Valera Selev's Avatar
    Join Date
    Apr 2004
    Location
    Lviv, Ukraine
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by duuudie
    Hi

    Sorry I don't have the time to dig deeper into your code, however here is a little davice: as far as I know, this is wrong:
    <div id="content" class="content">
    The W3C HTML Validator doesn't think so.

  8. #8
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Valera Selev
    See, now I'm writing a template, which may be changed by anyone afterwards. Of course, I may assign this feature in some kind of "Developing Conventions", but still, limitimg customers in any way is not the best variant. Any ideas?
    I have no idea what you meant in this statement. The CSS box model explicitly states that borders and padding are ADDED to the total computed width of any box. Your div has a width of 100% plus padding and borders; since you're not working to the spec I am not really sure what to say other than "work to the spec". If you give me more details I'll be more than happy to help, but for now I'm not sure how following the specs is "limiting" your customers in any way.

  9. #9
    gimme the uuuuuuuuuuu duuudie's Avatar
    Join Date
    Feb 2004
    Location
    Switzerland
    Posts
    2,253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh really? my bad then All apologies.


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
  •