Grow your CSS skills. Land your dream job.

width:100% + padding/margin question

  • # August 22, 2008 at 12:57 am

    If I have:

    Code:

    and I do:

    Code:
    #box1 { width:500px; }
    #box2 { width:100%; padding:10px; }

    The 10px padding of #box2 will be allocated outside of #box1. According to the box model, this is the correct behavior (except for buggy IE6). But that is not what I want, I want the padding for #box2 remain inside #box1 and keeping the width in %.

    How can I do that?

    Thanks.

    # August 22, 2008 at 11:42 am

    Why do you want to keep the width of box2 in % when its fixed at 500px because of box1?

    If you want 10px padding inside box1, just have:

    Code:
    #box1 { width:500px;}
    #box2 { padding:10px;}
    # August 22, 2008 at 4:32 pm
    "chazzwick" wrote:
    Why do you want to keep the width of box2 in % when its fixed at 500px because of box1?

    So if you change the width of box1 in the future, box2 will automatically expand to fill it completely.

    # August 24, 2008 at 7:22 pm

    If you don’t give box2 a fixed width, it’s going to fill the available space of it’s parent by default ;)

    # August 27, 2008 at 1:59 am

    Sorry but I forgot to mention the #box2 is floated.

    box
    # August 27, 2008 at 5:15 am

    Why are you floating box2? Post a link to your site or a representation of what you’re looking to achieve.

    # September 4, 2008 at 2:05 am

    Because #box2 contains floating elements, and in order to wrap those elements, I need to float #box2 and also #box1…

    I don’t have any example on hand right now, =(

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".