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

Thread: TD Padding

  1. #1
    Regular Coder
    Join Date
    Apr 2006
    Posts
    231
    Thanks
    9
    Thanked 1 Time in 1 Post

    TD Padding

    I have a table with 5 columns. The two outside cells are spacers (empty, just to fill space). The very middle one is empty as well. The other two are content cells. I want these two content cells to have a padding of 5px on the left and right side so my content shows up 5px from the border. It doesn't work like I have it. Anyone see anything wrong with this?

    Code:
    <table border="0" cellpadding="0" cellspacing="0" width="747">
    	<tr>
    		<td class="left-space"></td>
    		<td class="left-column" valign="top">CONTENT TO BE PADDED</td>
    		<td class="column-divider"></td>
    		<td class="right-column" valign="top">CONTENT TO BE PADDED</td>
    		<td class="right-space"></td>
    	</tr>
    </table>
    Code:
    .left-space{
    	width:14px;
    	padding: 0;
    	margin: 0;
    }
    .left-column{
    	width: 412px;
    	margin: 0;
    	padding: 0px 5px 0px 5px;
    }
    .column-divider{
    	width: 7px;
    }
    .right-column{
    	width: 300px;
    	margin: 0;
    	padding: 0px 5px 0px 5px;
    }
    .right-space{
    	width:14px;
    }
    (I put the right-space and the left-space because padding wasn't working. If my padding worked, Iwould have had padding: 0 5 0 19 for the left column, and 0 19 0 5 for the right column.)

  • #2
    Registered User
    Join Date
    Oct 2006
    Posts
    80
    Thanks
    0
    Thanked 0 Times in 0 Posts
    its because the tables dont have the "padding" attribute. you have to use cellpadding: Xpx; or something like that. you should try using css divs if you are using these tables for layout, just play with em and you will like them.

  • #3
    Regular Coder
    Join Date
    Apr 2006
    Posts
    231
    Thanks
    9
    Thanked 1 Time in 1 Post
    I wanted to use divs, but I have a complicated layout. I float left-column left, and right column right. When they expand from the content in them, they overlap the bottom div. (go over it)

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,474
    Thanks
    6
    Thanked 980 Times in 953 Posts
    Quote Originally Posted by <?austin ?> View Post
    its because the tables dont have the "padding" attribute. you have to use cellpadding: Xpx;
    That's not correct. At least not entirely. There is no CSS cellpadding property, padding is perfectly fine (and should work). cellpadding is an HTML attribute and goes into the tabel tag. And the value is just a number without unit:
    Code:
    <table cellpadding="0">
    ...
    Erindesign, look at the layout examples on http://bonrouge.com . I guess you'll find your solution there.

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Your cell widths and padding do not add up to 747 pixels. Anyway, assuming that the content of that table is not tabular data, it makes more sense to do:

    Code:
    CSS:
    /* total width: 767 pixels (35 margin + 20 padding + 712 width) */
    
    #left-column, #right-column {
      float: left;
      padding: 0 5px;
      }
    #left-column {
      width: 412px;
      margin: 0 7px 0 14px;
      }
    #right-column {
      width: 300px;
      margin-right: 14px;
      }
    
    HTML:
    <div id="left-column"></div>
    <div id="right-column"></div>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #6
    Regular Coder
    Join Date
    Apr 2006
    Posts
    231
    Thanks
    9
    Thanked 1 Time in 1 Post
    Should be 747. Padding is on the inside of an element. That's why I used padding. I wanted my content away from the border.

  • #7
    Regular Coder
    Join Date
    Apr 2006
    Posts
    231
    Thanks
    9
    Thanked 1 Time in 1 Post

    Grrrrrrrrrrrrrr

    Okay, I tried the above divs but they didnt work. I guess I should be more specific. I put a picture together to help with this:

    http://www.imagemule.com/uploads/erindoNOc.gif

    -The two blue boxes (column-left and column-right) are where content will be. They should expand vertically and move the two divs under them, down (footer & content-bottom).
    -The two blue boxes have padding as shown. left & right: 5px
    -The whole thing should be centered, all the divs. Maybe with a container div?


    Can anyone give this a shot. I'm just looking for structure (floats, widths, margins, paddings.) I tried it and got almost everything like it looks but didn't quite work out. my paddings moved everything and the two columns would be under one another.

  • #8
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by Erindesign View Post
    Should be 747. Padding is on the inside of an element. That's why I used padding. I wanted my content away from the border.
    Incorrect. Read the W3Cís CSS2 specification: the box model. The amount of space an object takes up is determined by margins + borders + padding + width. Itís harder to tell when you've exceeded the width with tables because tables have some quirks, such as expanding anyway even if the set width is too small; it takes your width as a suggestion instead of order.

    Iím guessing that you believe otherwise because the page behaves otherwise in Internet Explorer while in quirks mode. Internet Explorer 5 rendered the box model incorrectly (according to the spec); Microsoft fixed this in Internet Explorer 6ís standard-compliance mode, but it still uses the old box model in backward-compatibility (quirks) mode. The recently released Internet Explorer 7 maintains this behavior.

    Quote Originally Posted by Erindesign View Post
    The whole thing should be centered, all the divs. Maybe with a container div?
    Yeah, surround the floated div elements with a container and apply margin: 0 auto to the container to center it. Note that the correct centering method doesnít work in Internet Explorer while in quirks mode.

    Quote Originally Posted by Erindesign View Post
    my paddings moved everything and the two columns would be under one another.
    If youíre referring to overlap, this may be due to the floats not being cleared. You may need to clear your floats by using the clear property on the footer (clear: left) and other elements that appear after the floated elements, or by clearing the float elements directly.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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