html - posicionar - Flota un DIV a la izquierda usando CSS

posicionar div css

Question

Tengo dos div s formateados como paneles. Uno es el panel principal mientras que el otro es algo así como una barra lateral. Me gustaría que la barra lateral flote hacia la izquierda, pero esta última está incrustada dentro de la div principal. Quiero que aparezca junto al panel principal, en lugar de dentro.

Sé que podría flotar la barra lateral hacia la izquierda, el panel principal hacia la derecha y agregar algo más de contenido después de ellos y usar clear: both para hacer que la página cambie de tamaño y se desplace correctamente; esto suena como un truco, sin embargo, y requiere especificar el tamaño de ambos paneles. Si pudiera flotar solo la barra lateral a la izquierda, entonces el panel principal se dimensionaría automáticamente para cubrir el resto de la página.

Mi código HTML en este momento se ve así:

<div id="sidebar" class="panel">
    Sidebar
</div>

<div id="content" class="panel">
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
</div>

Y el CSS de interés es:

#sidebar {
    float: left;
    width: 30%;
}

En la captura de pantalla siguiente, uno puede ver fácilmente que la barra lateral está flotando hacia la izquierda, pero de alguna manera está dentro del panel principal. En el código HTML, sin embargo, la barra lateral está claramente fuera del panel principal. ¿Cómo puedo solucionar eso sin tener que usar float: right en el panel principal?

Answer 1

@ Angelos podría usar el diseño de la tabla anterior, por lo que la parte izquierda tiene un ancho fijo y la parte derecha ocupa todo el resto del espacio disponible ..

Answer 2

Si flexbox es una opción, puede hacer que el panel principal cubra el resto del espacio horizontal :

1. Especificar display: flex en el elemento contenedor ( body en la demostración a continuación)

2. Agregue flex: 1 al panel principal para que crezca y se ajuste al espacio disponible restante.

Vea la demostración simplificada a continuación:

body {
  display: flex;
}

.panel {
  border: 1px solid;
}

#sidebar {
  width: 30%;
}

#content {
  flex: 1;
}

<div id="sidebar" class="panel">
  Sidebar
</div>

<div id="content" class="panel">
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

Answer 3

* {
  box-sizing: border-box;
}

#sidebar {
  width: 30%;
  float: left;
  border: 1px solid black;
}

#content {
  float: right;
  width: 70%;
  border: 1px dashed blue;
}

.clearfix:after,.clearfix:before {
  display: table;
  content: '''';
  clear: both;
}

<div class="clearfix">
  <div id="sidebar" class="panel">
    Sidebar
  </div>

  <div id="content" class="panel">
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
  </div>
</div>

Si desea usar flotadores, debe usar float para ambos bloques, porque float "crea su propio flujo", es por eso que se superpone.

Pero prefiero recomendarte que uses flexboxes como se mencionó anteriormente, porque es una tecnología bastante poderosa que es ampliamente compatible. Según este sitio, https://caniuse.com/#search=flexbox usando flexbox es compatible con el 96.63% de dispositivos en todo el mundo.