Hola tengo el siguiente codoigo html
Código:
<!DOCTYPE html>
<html dir="ltr" lang="es-es">
<head>
<link href="compartidos/css/prueba.css" rel="stylesheet" type="text/css" media="all">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
<title>Prueba</title>
</head>
<body>
<!-- Inicia div padre -->
<div id="padre"><p>OBJETO PADRE</p>
<!-- Inicia div hijo 1 -->
<div id="hijo1"><p>OBJETO HIJO1</p>
</div><!-- finalicia div hijo 1 -->
<!-- Inicia div hijo 2 -->
<div id="hijo2"><p>OBJETO HIJO2</p>
<!-- Inicia div hijo 21 -->
<div id="hijo21"><p>OBJETO HIJO21</p>
</div><!-- finalicia div hijo 21 -->
<!-- Inicia div hijo 22 -->
<div id="hijo22" ><p>OBJETO HIJO22</p>
</div><!-- finalicia div hijo 22 -->
</div><!-- finalicia div hijo 2 -->
<div id="hijo3"><p>OBJETO HIJO3</p>
</div><!-- finalicia div hijo 3 -->
</div><!-- finalicia div padre -->
</body>
</html>
y el siguiente codigo CSS
Código:
position:relative;
z-index:1;
margin-left:auto;
margin-right:auto;
padding:1em;
width:100%;
border: 3px solid red;
}
/*Div hijo1*/
div#hijo1{
position:relative;
width:50%;
height:20%;
border: 3px solid blue;
}
/*Div hijo2*/
div#hijo2{
position:relative;
width:50%;
height:20%;
border: 3px solid green;
}
/*Div hijo21*/
div#hijo21{
position:relative;
width:45%;
border: 3px solid brown;
}
/*Div hijo22*/
div#hijo22{
position:relative;
width:45%;
border: 3px solid yellow;
}
/*Div hijo22*/
div#hijo3{
position:relative;
width:50%;
height:20%;
border: 3px solid blue;
}
.flota{
float:left;
}
body{
margin-left : auto;
margin-right : auto;
padding:1em;
width:100%;
border: 3px solid yellow;
}
La cuestion es que tengo dos problemas:
1ª Quiero colocar hijo 21 e hijo 22 dentro de hijo 2 pero alineados horizontalmente con un tamaño de un 45% cada uno pero siempre me lo coloca en el div hijo 2 debajo (verticalmente) o en el div tres o de pendiendo de si es position:relative o si es position:absolute
2º nTampoco entiendo porque div padre si tiene (margin-left:auto; margin-right:auto;) se sale de body creo qu deberia permanecer dentro ¿ no ?