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 2 of 2
  1. #1
    New Coder
    Join Date
    Oct 2009
    Posts
    51
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Properly Add Padding to Child DIVs

    Hello,

    Having a little problem with the Box Model. I'm trying to add padding to a number child DIVs of a parent DIV. I'm building an app that dynamically adds a columns widget onto a page based on an end-user's selections (2-5 columns).

    Code:
    <div style="display:block; width:100%; margin:7px 0;">
        <div style="padding:5px; float:left; width:20%;">col1</div>
        <div style="padding:5px; float:left; width:20%;">col2</div>
        <div style="padding:5px; float:left; width:20%;">col3</div>
        <div style="padding:5px; float:left; width:20%;">col4</div>
        <div style="padding:5px; float:left; width:20%;">col5</div>
    </div>
    The problem with this code is the padding is being added to the width causing the last column to fall to the next line. In addition, I will not know the width of the page/parent DIV nor the number of columns - so it seems I'm stuck with percentages.

    I'd really hate to resort to using Tables, but the solution needs to work in IE7 and above.

    Thoughts?

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    901
    Thanks
    0
    Thanked 118 Times in 117 Posts
    you could lower the width and use percentage for the padding as well.
    e.g.
    Code:
    <div style="padding:0.5%; float:left; width:19%;">col1</div>
    you can you this formula ( 100 / number of columns ) - 1.1 to find the width in percentages for the divs.

    I suggest 1.1, as the sum of the rounded calculated values in pixels may exceed 100%, if you only substract the exact padding which in this case is 1%


  •  

    Posting Permissions

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