[consulta] posicionamiento aside

[pepeargenti]

Buenas noches cibernautas.
Cual seria la forma correcta de posicionar un aside? , flotando tanto articulo como el aside a la izquierda o flotando el aside a la derecha del contenedor principal?

Al flotarlo a la derecha me lo ubica por debajo del pie de pagina(color verde):


Debería crear un div que abarque tanto articulo como aside para que se sitúen a la misma altura y luego definir los anchos de c/u con porcentajes?

Nota : no me convence hacerlo con position:absolute ya que cada pagina tiene distinto ancho.

Gracias de antemano.

[tanatos_neon]

Hola.

Si aplicas position:left a los dos elementos deberian quedarse bien colocados. Si no es asi y se te desplaza debajo, probalmente sea por el tamaño del articulo, dado que si tienes 60>% en uno y 40% en otro, tienes que tener en cuenta el margin y el border, asique la cifra no seria correcta.

Te recomiendo usar calc y asi te quitas de jaleos.

Ejemplo.

Código HTML:

<style>
article { width: calc(100% - 212px) }
aside { width:200px; margin-left:10px; border:1px solid #333;}
</style>

<article>
</article>
<aside>
</aside> 

Como ves, puedes establecer un ancho fijo al aside y luego hacer que el article se ajuste.

Espero que te valga.

[pepeargenti]

ese cálculo es sobre el div que lo contiene verdad?

deberia darle un ancho del 100% al div q contiene tanto al article como al aside?

[pzin]

Tienes varias formas de hacerlo. A mi me gustan estas dos.

Partiendo de esta base:

Con FlexBox:

Código HTML:

<div class="contenedor">
  <div class="contenido"></div>
  <aside></aside>
</div>
 

Código CSS:

.contenedor {
  display: flex;
}
  
.contenido {
  flex: 1;
}
  
aside {
  width: 200px;
}
 

Flotando elementos:

Aquí tienes que alterar el orden de los elementos.

Código HTML:

<div class="contenedor">
  <aside></aside>
  <div class="contenido"></div>
</div>
 

Código CSS:

.contenido {
  overflow: hidden;
}
  
aside {
  float: left;
  width: 200px;
}
 

En ambos casos es una solución en la que aside tiene un tamaño fijo y el contenido ocupará el resto del espacio disponible.

[codeams]

Hola, si colocas width:auto y margin-right (igual al width del aside) al div contenedor, y posteriormente los flotas a la izquierda estos deberían colocarse correctamente.

Código CSS:

#principal {
  box-sizing: border-box;
  display: inline-block;
  width: auto;
  margin: 0;
  margin-right: 300px; /* Longitud del aside */
  float: left;
}
 
#aside {
  box-sizing: border-box;
  display: inline-block;
  width: 300px;
  float: left;
  margin: 0;
}
 

No olvides colocar overflow:hidden al contenedor de estos dos para evitar que su ancho y largo se vuelva cero.

También es importante usar box-sizing border box si no quieres tomar medidas de los paddings y demás cosas manualmente.

Nota: Lo interesante de este método es que no requiere características de CSS3 como calc() o flexbox, más que el box-sizing que como he mencionado arriba es opcional.