Hola muy buenas.. soy nuevo en esto y tengo un problema a la hora de poner 2 DIV lado a lado.. me explico..
Tengo un DIV=content que es mi "cuerpo principal" donde va todo.
Dentro tengo el Encabezado "header", el MENU "menu", PRINCIPAL "principal" () estos son los que van lado a lado.. y por ultimo el PIE "footer".
Cuando pongo "menu" con float:left el "principal" se me pega a el sin respetar los margenes que tengo a 1px todo.
También no entiendo porque mi height:100% de content no funciona!
Aquí os dejo mi código y el CSS:
////////////////////////////////////////////////////////////////////////////////////////////////////////
<body>
<div id="content">
<div id="header">
header header header header header header header header header header header header header
header header header header header header header header header header header header header
</div>
<div id="menu">
menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu
menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu
menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu
menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu
</div>
<div id="principal">
principal principal principal principal principal principal principal principal principal
principal principal principal principal principal principal principal principal principal
principal principal principal principal principal principal principal principal principal
principal principal principal principal principal principal principal principal principal
</div>
<div id="footer">
<h4>FOOTER</h4>
</div>
prueba content
</div>
</body>
////////////////////////////////////////////////////////////////////////////////////////////////////////
body {background:gray;
}
h4 {font-family:Verdana;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
margin-top:0px;
}
/********************************************/
#content {background:white;
width:80%;
height:100%;
margin:0 auto 0 auto;
}
/********************************************/
#header {background:silver;
height:15%;
margin: 1px 1px 1px 1px;
}
/********************************************/
#menu {background:silver;
width:30%;
height:70%;
float:left;
margin: 1px 1px 1px 1px;
}
/********************************************/
#principal {background:silver;
width:80%;
margin: 1px 1px 1px 1px;
}
#principal:before {
margin-left:5px;
}
/********************************************/
#footer {background:silver;
height:15%;
text-align:center;
margin: 1px 1px 1px 1px;
position:relative;
clear:both;
}
////////////////////////////////////////////////////////////////////////////////////////////////////////
A ver si me podéis echar un cable.. gracias!