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 6 of 6

Thread: padding

  1. #1
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,662
    Thanks
    41
    Thanked 189 Times in 188 Posts

    padding

    Ok so I thought i had a firm grasp on margins/padding... my issue is i have some elements... they are all alined how i want them but when i had text in them i wanted to add some padding (to push the txt off the walls) but when i added the padding it screwed up all my margins... the following is code

    Note that i have commented out the padding because of this and the text within the divs is arbitrary

    Code:
    #search_field{
       background-color: #FFFFFF;
       border:3px ridge #FFFFFF;
       margin: 10px 5px 10px 10px;
       width: 784px;
       height: 576px;
       float: left;
       /*padding: 3px;*/
    }
    
    #right_col_top{
       background-color: #FFFFFF;
       border:3px ridge #FFFFFF;
       margin: 10px 10px 5px 5px;
       height: 280px;
       width: 198px;
       float: right;
       overflow: scroll;
       /*padding: 3px;*/
    }
    
    #right_col_bottom{
       background-color: #FFFFFF;
       border:3px ridge #FFFFFF;
       margin: 5px 10px 10px 5px;
       width: 198px;
       height: 280px;
       float: right;
       overflow: scroll;
       /*padding: 3px;*/
    }
    Also for dimension purposes it is within a 1024 element leaving 42 px... 10 btw each element and the wrapper (amounting to 30px) and four 3px border occurrences...

    I dont see why when i add padding (to push the text off the walls) it blows my element's alignment to heck-- am i missing something?
    Last edited by alykins; 05-14-2011 at 10:34 PM.

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    the following is code
    That's too insufficient to understand your issue. Can we have a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Really need to see the html the css applies to.

    But as a guess, I suspect the parent element of the one you apply the padding to does not have a width specified and so the amount of padding is added to the overall width of the element and so could mess up your margins.

    Try specifying a width to the parent element and then when you apply padding to the child element, it will push the child element's content away from the element's boundary.
    Last edited by bullant; 05-14-2011 at 10:46 AM.

  • #4
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,662
    Thanks
    41
    Thanked 189 Times in 188 Posts
    code is too much to post- developing an asp.net project... also dont have it hosted, i use SQL...

    for eg though these children are within a wrapper with a width of 1024 pixels. everything else is arbitrary...

    they align as follows

    | wrapper width 1024px |
    | |
    | 10px |search_field| 10px |right_col_top| 10px |
    | 10px |search_field| 10px |right_col_top| 10px |
    | 10px |search_field| 10px |right_col_bottom| 10px |
    | 10px |search_field| 10px |right_col_bottom| 10px |
    | |

    and to add the css for the wrapper

    Code:
    #wrapper{ 
       border: 8px ridge #FFFFFF; 
       font-family: 'century gothic' 'helvetica' 'arial'; 
       background-color: #5D0404; 
       width: 1024px; 
       height: 768px;
       margin: auto;
    }
    the other three elements have css as provided above.

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Well then as a guess...the padding your adding to get some space on your text? Why arent you adding to the <p> tag in your css?

    Perhaps:

    #search_field p{padding: 25px;}
    Teed

  • Users who have thanked teedoff for this post:

    alykins (05-14-2011)

  • #6
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,662
    Thanks
    41
    Thanked 189 Times in 188 Posts
    thanx! that worked like a charm!

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE


  •  

    Posting Permissions

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