Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: Percentages

  1. #1
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts

    Percentages

    I'm building an entirely CSS oriented layout.

    I want to use perentages for my div widths so the width appears the same on all systems.

    Obviously if I have a div that is 75%, and I put a div inside that div.. The percentage will refer to the 75%.

    So for example if I have a div named #75 and it's width is 75% and I put another div named #100 inside of #75, and I gave #100 a 100% width it would be 100% of #75. Causing #100 to be 75% of the page as well.

    What I'm trying to learn is what math do I need to do when adding paddings.

    Let's say I have the same divs. (#75 and #100) #75 has a width of 75%. If I give #100 a padding of three pixels how would I know what width to give #100?

    Can anyone point me to some excellent tutorials explaining percentages?

    Any help would be much appreciated. Thanks.

  • #2
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,437
    Thanks
    11
    Thanked 304 Times in 303 Posts
    Subscribing, to hear the discussion

    You might also look into LESS CSS, as it allows you to do calculations in your CSS that are pre-processed into CSS. Dunno that it specifically solves this issue (I don't know how this issue is solved), but it might help.

    Dave

  • #3
    Regular Coder
    Join Date
    Sep 2002
    Posts
    462
    Thanks
    0
    Thanked 20 Times in 20 Posts
    Adding padding & margins to elements inside a percentage based container will expand the the outter container. If an outter container is set to w: 75% then the inner content will have to reflect the the horiz. padding and margin in a percentage as well...
    main container: w: 75%
    inner cantainer: w: 98% you also have to allow for horiz. borders that are applied to the inner container. approx. .05 ech. or 1% for both plus padding.

    I use a javascript percentage calculator to adjust things correctly, but note if you use on of these you'll need to round off the result.
    NO Limits!! DHCreationStation.com
    ------------------------------------------------------------
    For projects using MediaTypes (MIMETypes) visit E-BAM.net -(updated weekly)

    Broken items wanted for tinkerin'! PostItNow@BrokenEquipment.com
    Global Complaint Dept.

  • #4
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    Quote Originally Posted by c1lonewolf View Post
    Adding padding & margins to elements inside a percentage based container will expand the the outter container. If an outter container is set to w: 75% then the inner content will have to reflect the the horiz. padding and margin in a percentage as well...
    main container: w: 75%
    inner cantainer: w: 98% you also have to allow for horiz. borders that are applied to the inner container. approx. .05 ech. or 1% for both plus padding.

    These are the reasons I asked my question. I want to know how to do the math.
    Last edited by stevenmw; 02-01-2012 at 06:57 PM.


  •  

    Posting Permissions

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