Porfavor necesitaria una ayuda para el diseño de una pagina web que estoy intentando hacer, resulta que cuando NO pongo el padding para que se vea el texto de los div bien, pues la web se ve perfectamente, como sale en la foto:
En cambio, cuando pongo el padding para posicionar y organizar el texto, se me desconfigura las posiciones de los div, me gustaria que alguien me echara una mano jejeje, aqui dejo mi codigo, si puede ser que alguien que entienda mas de css que me lo mejore, gracias.
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="es" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sin Nombre</title>
<style>
*{ margin:0; }
#page{
position: absolute;
background-color: #AAA;
width: 100%;
height: 100%;
}
#container{
background-color: #D00;
width: 90%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
#header{
background-color:#CCC;
height: 10%;
padding: 1%;
}
#menu{
background-color: #999;
clear: both;
height: 5%;
}
#content{
background-color:#00F;
height:80%;
}
#pub{
background-color:#CC0;
float: left;
width: 15%;
height: 100%;
}
#boxsms{
background-color: #C30;
float: right;
width: 85%;
height: 100%;
padding: .2%;
}
#footer{
background-color: #0F0;
clear: both;
height: 5%;
padding: .5%;
}
</style>
</head>
<body>
<div id="page">
<div id="container">
<div id="header">Header</div>
<div id="menu">Menu</div>
<div id="content">
<div id="pub">Publi</div>
<div id="boxsms">BoxSMS</div>
</div>
<div id="footer">Footer</div>
</div>
</div>
</body>
</html>