Esta es mi primer prueba que hago después de leer un poco, seguramente sera muy sencillo para la mayoria de ustedes. Mi problema es que estoy tratando de estructurar el encabezado de la pagina pero no me posiciona unas cajas de la manera que quiero.
Adjunto el codigo para que vean de que hablo. Quiero hacer que lo que esta en tonos de verde quede donde esta lo amarillo. El tema es que el contenedor de los botones 5 y 6 me los ubica justo seguido del contenedor de los botones 3 y 4, y no mas arriba como se ve.
Aguardo respuestas. Gracias!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Esquema de prueba</title>
<style>
.body {
width: 1090px;
margin: 0 auto;
}
.contenedor {
width: 1090px;
margin: 0 auto;
background-color: peru;
}
.cabecera {
width: 1090px;
height: 66px;
margin: auto;
background-color: yellow;
}
.nombredelsitio {
width: 198px;
height: 56px;
font-size: 0.6cm;
background-color: orange;
float:left;
}
.botones12 {
width: 155px;
height: 56px;
background-color: rgb(255, 192, 75);
float:left;
text-align: center;
}
.boton1 {
width: 128px;
height: 19px;
font-size: 0.23cm;
background-color:powderblue;
float:left;
}
.boton2 {
width: 128px;
height: 19px;
font-size: 0.23cm;
background-color:powderblue;
float:left;
}
.logo {
width: 125px;
height: 32px;
background-color: orange;
float:left;
text-align: right;
}
.secciondeslizable {
width: 250px;
height: 32px;
background-color: rgb(255, 192, 75);
float:left;
}
.botones34 {
width: 375px;
height: 24px;
background-color: purple;
float:left;
}
.boton3 {
width: 174px;
height: 24px;
font-size: 0.23cm;
background-color:powderblue;
float:left;
text-align: center;
}
.boton4 {
width: 174px;
height: 24px;
font-size: 0.23cm;
background-color:powderblue;
float:right;
text-align: center;
}
.botones56 {
width: 138px;
height: 56px;
background-color: green;
float:left;
}
.boton5 {
width: 113px;
height: 19px;
font-size: 0.23cm;
background-color: rgb(0, 187, 0);
float:left;
}
.boton6 {
width: 113px;
height: 19px;
font-size: 0.23cm;
background-color: rgb(0, 187, 0);
float:left;
}
.usuario {
width: 224px;
height: 56px;
background-color: rgb(0, 168, 0);
float:left;
font-size: 0.2343cm;
}
.espacio {
width: 1090px;
height: 10px;
background-color: rgb(0, 187, 0);
float:left;
}
.contenido {
width: 1090px;
height: 900px;
background-color: aliceblue;
}
.piedepagina {
width: 1090px;
height: 113px;
clear: both;
background-color: blue;
bottom: 0px;
}
</style>
</head>
<body class="body">
<div class="contenedor">
<div class="cabecera">
<div class="nombredelsitio"> <h3>Nombre del Sitio</h3> </div>
<div class="botones12">
<div class="boton1"> <h3>Boton 1</h3> </div>
<div class="boton2"> <h3>Boton 2</h3> </div>
</div>
<div class="logo"> <h3>Logo</h3> </div>
<div class="secciondeslizable"> <h3 >Seccion deslizable</h3 ></div>
<div class="botones34">
<div class="boton3"> <h3>Boton 3</h3> </div>
<div class="boton4"> <h3>Boton 4</h3> </div>
</div>
<div class="botones56">
<div class="boton5"> <h3>Boton 5</h3> </div>
<div class="boton6"> <h3>Boton 6</h3> </div>
</div>
<div class="usuario"><h3>Nombre Usuario</h3></div>
<div class="espacio"></div>
</div>
</div>
<div class="contenido"></div>
<div class="piedepagina"></div>
</body>
</html>