Ok.
Tengo este código:
Código PHP:
<html>
<head>
<title>Maquetando CSS</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">CABECERA</div>
<div id="wrapper">
<div id="main">
<div id="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 id="column2">
AQUI EL CUERPO
</div>
</div>
</div>
<div id="footer">
FOOTER
</div>
</body>
</html>
El CSS:
Código PHP:
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFFF;
color: #000;
margin:0;
padding:0;
border:0;
}
#header {
width:100%;
background-color:#FFCC33;
}
#wrapper {
width:100%;
height:auto;
margin:auto;
}
#main {
width:100%;
overflow:hidden;
height:auto;
}
#column1 {
width:20%;
background-color:#5B7444;
float:left;
}
#column2 {
width:80%;
background-color:#47697E;
float:left;
}
#footer {
width:100%;
background-color:#FCF1D1;
}
El problema que tengo es que quiero tener márgenes para el contenido en Header, columna1, columna2 y el footer. Pero al poner padding 5px 5px 5px 5px se mueven las columnas.
Cómo soluciono este problema?