Estoy haciendo una página web y no sé si la forma en la que la hago esta bien o no, es por ello que me gustaría saber si es la forma correcta o no.
En un principio, había utilizado para todo la opción de position:absolute, ya que es muy facil de usar, pero muy tedioso, pero según parece esto no esta muy bien visto, y que no estará en el flujo normal de la página.
En segundo lugar, la cual es la que estoy utilizando en este momento. Estoy creando divs en los cuales introduzco, otros divs invisibles y dentro de este, creo otro div para posicionarlo. Quiero que se fijen en el div que se llama botonera principal. Muestro mi código:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Degreed</title>
<meta charset = "UTF-8">
<link rel="stylesheet" type="text/css" href="css/principal.css">
</head>
<body>
<div class="botonera_principal">
<div id="ancho_botonera_principal">
<div id="area_usuario">
<ul>
<li id="inicio_sesion" href="#">Iniciar sesión</li>
<li> / </li>
<li id="registro" href="#">Registrarse</li>
</ul>
</div>
<div id="area_buscador">
<input id="buscador"type="text" size="24" maxlength="30"></div>
</div>
</div>
</div>
<div class="botonera_secundaria"></div>
<div class="panel_noticias">
<div class="panel_lateral"></div>
</div>
<div class="panel_final"></div>
</body>
</html>
CSS
body{
margin: 0px;
padding: 0px;
}
.botonera_principal{
background-color: rgb(44,44,44);
height: 68px;
}
#ancho_botonera_principal{ /*Revisar*/
height: 68px;
width: 1046px;
margin: auto;
}
#area_usuario{
height: 68px;
width: 200px;
float: right;
}
#area_buscador{
height: 68px;
width: 600px;
float: right;
display: flex;
}
#buscador{
width: 300px;
height: 25px;
border-radius: 4px;
margin: auto;
vertical-align: middle;
font-size: 20px;
}
.botonera_principal ul{
padding: 0px;
margin: 0px;
float: right;
padding-top: 48px; /*Revisar*/
padding-right: 5px; /*Revisar*/
}
.botonera_principal ul li{
padding: 0px;
margin: 0px;
list-style: none;
display: inline;
font-size: 15px;
color: rgb(141,141,141);
font-style: none;
}
#inicio_sesion{
cursor: pointer;
}
#inicio_sesion:hover{
color: rgb(252,203,26);
}
#registro{
cursor: pointer;
}
#registro:hover{
color: rgb(252,203,26);
}
.botonera_secundaria{
background-color: rgb(13,13,13);
height: 30px;
}
.panel_noticias{
background-color: rgb(162,0,0);
height: 2000px;
width: 1046px; /*55%*/
margin: auto;
}
.panel_lateral{
background-color: rgb(44,44,44);
height: 2000px;
width: 293px; /*28%*/
float: right;
}
.panel_final{
background-color: black;
height: 120px;
}