SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Using %width

Hybrid View

  1. #1
    SitePoint Member flannel jesus's Avatar
    Join Date
    Nov 2012
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using %width

    Let's say I have two div inside another:

    HTML Code:
    <div class="outside">
    <div class="inside">
    </div>
    <div class="inside">
    <div class="clear"></div>
    </div>
    And let's say I want my inside-divs to be the exact same width as each other, but the outside div has a border and padding.

    Code css:
    .clear {
    clear:both;
    }
     
    .outside {
    width:400px;
    border:1px;
    padding:9px;
    }
     
    .inside {
    padding:0px;
    margin:0px;
    width:50%;
    float:left;
    }

    Will the width calculation for the .inside take into account the border and padding? Will it be 50% of 400 (200 px wide) or will it be 50% of (400-border-padding) = 50% of 380 = 190px wide?
    Last edited by Stevie D; Dec 8, 2012 at 05:10. Reason: Code tags added

  2. #2
    SitePoint Evangelist pip's Avatar
    Join Date
    Jun 2001
    Location
    Cape Town, South Africa
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I may be wrong, but as far as I know, it won't.
    I remember having to hack it with JavaScript in the past to calculate the correct sizes based on padding and border, but that's before the CSS3 days...
    - Pip
    ---------------------------------------------------------------------------------
    Nothing takes the taste out of peanut butter quite like unrequited love.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,821
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    The explanation is a bit convoluted but hopefully it will make sense.


    Assume I I am talking about BLOCK elements as inline elements dont actually have width.

    By default, a child element is 100% of the AVAILABLE width.
    For example: if the calculated with of the parent is 1000px , 0px padding, then the child element will be 1000px
    if the calculated with of the parent is 1000px=(700px width + 300px padding) then the child element will be 700px. In other words, width of child=100% width of parent ( not calculated width)

    Here is where it gets tricky.


    If you add padding to an element with no width declared then the calculated width ( that is width+padding) =100% of the parent
    BUT
    If you add padding to an element with width declared then the calculated width could overflow the parent, which is what you are probably referring to in your question

    For example:
    If the calculated with of the parent is 1000px=700px width +300px padding
    and you have a child element ( no width declared), to which you add 300px padding then the calculated width of the child element will STILL be 700px, leaving only 400px for content. But if you set the with of the child to :100%, then the calculated width will be the same as the parent that is : 700px + 300px padding. An important note , if you do this, is that the element will overflow the parent rightward ( not centered) ( in other words the padding on the left will not overlap, you will need positioning or negative margins to suck it back into place).

    Hopefully this helps clear up things for you.

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by flannel jesus View Post
    Will the width calculation for the .inside take into account the border and padding? Will it be 50% of 400 (200 px wide) or will it be 50% of (400-border-padding) = 50% of 380 = 190px wide?
    Off Topic:

    Would it not have taken you less time just to try this and see what happened?

    The width is the width of the content area, excluding borders, padding and margins.

    So if you have
    HTML Code:
    <div class="outside">
    <div class="inside">First inner box</div>
    <div class="inside">Second inner box</div>
    </div>
    Code css:
    .outside {width:400px; border:1px solid; padding:9px; overflow:hidden;}
    .inside {width:50%; float:left;}
    then you will have two inner boxes sitting side-by-side within the 'outside' div. Each inside div takes the width of 50% of the outside div, giving it 200px, which sits nicely inside the outside div, which has a content width of 400px and an overall width (including padding and borders) of 420px. All well and good so far.

    But ... as soon as you add any padding or border to the inside divs, that is added to their content width of 200px, meaning that they now take up more space than 200px and so don't fit side-by-side in a 400px wrapper.

    There is a sneaky solution to this! OK, it isn't that sneaky...
    HTML Code:
    <div class="outside">
    <div class="inside"><div>First inner box</div></div>
    <div class="inside"><div>Second inner box</div></div>
    </div>
    Code css:
    .outside {width:400px; border:1px solid red; padding:9px; overflow:hidden;}
    .inside {width:50%; float:left;}
    .inside div {border:1px solid green; padding:5px;}
    and that means that the innermost divs adapt to the available width, leaving you width a border and padding that doesn't go beyond the 200px content width of <div class="inside">

  5. #5
    SitePoint Member flannel jesus's Avatar
    Join Date
    Nov 2012
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you stevie D.


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
  •