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??
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.
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/
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.
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.
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
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.
Take a look at this if this helps you http://inspirationsunlimited.co.in/how-to/2-column-fluid-css-layout/