Padding change the columns

Discussion in 'CSS' started by piropeator, Nov 18, 2010.

  1. #1
    I find this code in other site:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
    <html> 
    <head> 
    <title>Plantilla</title> 
    <link href="style.css" rel="stylesheet" type="text/css" /> 
    </head> 
    
    <body> 
    <div class="header">CABECERA</div> 
    
    <div class="wrapper"> 
        <div class="main"> 
            <div class="column1"> 
    AQUI VAN LOS MENUS 
    La prueba que se quiere hacer es que el texto no sobrepase el ancho de la columna, se supone que debería truncarse 
    o simplemente quedar debajo  automáticamente, y si eso no funciona significa que algo no está bien. 
            </div> 
            <div class="column2"> 
    AQUI EL CUERPO cualquier texto cualquier texto cualquier texto cualquier texto cualquier texto cualquier texto 
    cualquier texto cualquier texto cualquier texto cualquier texto cualquier texto cualquier texto cualquier texto 
    cualquier texto cualquier texto cualquier texto cualquier texto cualquier texto cualquier texto cualquier texto 
    cualquier texto cualquier texto cualquier texto cualquier texto cualquier texto 
            </div> 
        </div> 
    </div> 
    
    
    <div class="footer"> 
     FOOTER 
      FOOTER 
       FOOTER 
        FOOTER 
         FOOTER 
          FOOTER 
    </div> 
    </body> 
    </html>  
    PHP:
    The CSS file is:
    body { 
        font-family: Arial, Helvetica, sans-serif; 
        background-color: #FFFFF; 
        color: #000; 
        margin:0; 
        padding:0; 
        border:0; 
    } 
    .header { 
        width:100%; 
        height:20px; 
        background-color:#FFEE00; 
        padding: 15px 15px 15px 15px; 
    } 
    .wrapper { 
        width:100%; 
        float:left; 
        height:auto; 
        margin:auto; 
        position:relative; 
        clear:both; 
        overflow:hidden; 
        background-color:#aaa001; 
    } 
    .main { 
        width:100%; 
        overflow:hidden; 
        height:auto; 
        float:left; 
        position:relative; 
        background-color:#FFf; 
    } 
    .column1 { 
        width:20%; 
        background-color:#5B7444; 
        float:left; 
        position:relative; 
        padding: 0; 
        overflow:hidden; 
    } 
    .column2 { 
        width:80%; 
        background-color:#47697E; 
        float:left; 
        position:relative; 
        overflow:hidden; 
    } 
    .footer { 
        width:100%; 
        background-color:#47697E; 
    }
    PHP:
    This example is working, but the problem is when the padding is changed, look:
    In .column1 when the padding is 5px 5px 5px 5px; all change the position. Why? and what is the solution??
    :confused::confused:
     
    piropeator, Nov 18, 2010 IP
  2. ronc0011

    ronc0011 Peon

    Messages:
    85
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    It's the floats. Floats work on percentage. In other words all width values must be in percentages. If the total widths of the elements on the page equal greater than the page it will push elements to the next line. Your page is apparently using all available width. So if you are going to increase the width of you borders then you will probably need to decrease the width of your columns or the containers in the columns.
     
    ronc0011, Nov 18, 2010 IP
  3. radiant_luv

    radiant_luv Peon

    Messages:
    1,327
    Likes Received:
    34
    Best Answers:
    1
    Trophy Points:
    0
    #3
    Width value can be fixed as well. You should always set a width on floated items (except if applied directly to an image – which has implicit width). If no width is set, the results can be unpredictable.

    Here is some information on float: http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
     
    radiant_luv, Nov 18, 2010 IP
  4. piropeator

    piropeator Well-Known Member

    Messages:
    194
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    121
    #4
    But when I put padding 1% 1% 1% 1% its the same problem.
     
    piropeator, Nov 20, 2010 IP
  5. tripad

    tripad Peon

    Messages:
    371
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Because Padding adds to the overall width and height of the element. So your addition of padding is just causing the overall size to increase.

    If you want 1% padding all around, reduce 1% of both width and height. Padding Border Margin everything adds to the size on the elements, so you need to keep all them in mind while calculating the total size of a particular element.
     
    tripad, Nov 22, 2010 IP
  6. CSM

    CSM Active Member

    Messages:
    1,047
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    55
    #6
    If you add a padding of e.g. 5 px you need to remove those padding from the width.

    Like this, when the #yourID should have 240px width:

    
    #yourID {
    width: 230px;
    padding:5px;
    }
    
    Code (markup):
    padding (in this case left, right, top and bottom (height is not measured in this example)) + 230px = 240px.
     
    Last edited: Nov 23, 2010
    CSM, Nov 23, 2010 IP
  7. GWiz

    GWiz Peon

    Messages:
    359
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #7
    CSM is correct, the easiest way to fix this problem is to use a fixed pixel width for the entire element and subtract the amount you have padded from each side. 240px width - 5px padding-left - 5px padding-right = 230px width.

    However, there is a different way, but probably not the most practical depending on your website. It is called the border-box for Box Sizing. The default Box Sizing Method describe above is the usual content-box method, so it will work as intended in all browsers, but there is a new method which will only apply the padding internally to the content rather than externally, and making the window larger.

    It won't work in all browsers, but it has some limited IE support: http://www.quirksmode.org/css/box.html
     
    GWiz, Nov 23, 2010 IP
  8. piropeator

    piropeator Well-Known Member

    Messages:
    194
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    121
    #8
    hhmm... but, I don't want to use px, I want to use %, because I try to make a css fluid or liquid for any screen width. Do you understand? that's my problem.
     
    piropeator, Nov 27, 2010 IP
  9. radiant_luv

    radiant_luv Peon

    Messages:
    1,327
    Likes Received:
    34
    Best Answers:
    1
    Trophy Points:
    0
    #9
    radiant_luv, Nov 27, 2010 IP