Maybe I just have been misunderstanding this but I didn't think padding added to the width of a column. For instance if I have a 950px wide layout and I make the left column 150px and the right column 150px and the middle column 600px. I have the left and middle column floated left and the right column floated right. Say for instance I have a list in each the left and right column. I have all padding and margins set to 0. When I add padding to the right column , say padding-left: 10px, It will push my right column down. It was my understanding that padding just pushed the inside together. But of course I am sure I am wrong as usual.
I think the padding will added into any width of div .. You can check with this quick test I made before. Make a html file with this code: <html> </head> <body> <div style="width:200px; height:20px; background:#000033;"></div> <div style="width:200px; height:20px; background:#000033; padding-left:20px;"></div> </body> </html> Code (markup): and the result is the second div is more wider than the other one on a browser
You're thinking like the old IE broken box model. The correct mode has width + padding + border. That's the box. A margin can then add separation from adjacent elements. Here is a simple demo of the two box models. If you view first in Firefox, you will see a rendering in standards compliance. By putting a comment before the DTD, IE is thrown into quirks mode where it uses the non-complying border box model. See how much narrower the box is. As an experiment, increase the padding and watch the content area disappear. If you remove that comment, IE will render in standards mode, using the correct box model. <!----> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta name="editor" content="Emacs 21" /> <meta name="author" content="Gary Turner" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Box Model Test</title> <style type="text/css"> /*<![CDATA[*/ html, body { margin: 0; padding: 0; } div { width: 150px; padding: 15px; border: 10px solid red; background-color: yellow; } p { margin: 0; background-color: blue; color: white; } /*]]>*/ </style> </head> <body> <div> <p>This is an example of content within a 150px wide box. The box has 15px of padding and a border 10px wide. The total box is 200px from outer border to outer border.</p> </div> </body> </html> Code (markup): cheers, gary
thanks gary you are the guru as always the problem I am having is styling a joomla template. I am redoing tables layout in CSS you can set the modules so that the code display is as follows: <div class="module"> <div> <div> <div> whatever u want here </div> </div> </div> </div> The point of this code is to allow for rounded corners. Which div should I add the padding to if I want the total width of the div to be 164px, because that is the width of my background files?
i'm usually use this code for joomla module -3 position div.module { width: 164px; /* this is your module width */ background: url(../images/background_middle.gif) repeat-y; } div.module div { background: url(../images/background_bottom.gif) bottom left no-repeat; } div.module div div { background: url(../images/background_top.gif) top left no-repeat; padding: 15px 15px 20px 16px; /* this is actually where you module content goes */ } div.module div div div { background: none; padding: 0; width: auto !important; width: 100%; } Code (markup): hope it helps