Dos divisiones una al lado de la otra: pantalla fluida

222

Estoy tratando de colocar dos divs uno al lado del otro y estoy usando el siguiente CSS para ello.

#left {
  float: left;
  width: 65%;
  overflow: hidden;
}

#right {
  overflow: hidden;
}

El HTML es simple, dos divisiones izquierda y derecha en una envoltura div.

<div id="wrapper">
  <div id="left">Left side div</div>
  <div id="right">Right side div</div>
</div>

He intentado muchas veces buscar una mejor manera en StackOverflow y otros sitios también, pero no pude encontrar la ayuda exacta.

Entonces, el código funciona bien a primera vista. El problema es que el div izquierdo obtiene relleno / margen automáticamente a medida que aumento el ancho en (%) Entonces, al 65% de ancho, el div izquierdo tiene algo de relleno o margen y no está perfectamente alineado con el div derecho, intenté rellenar / margen 0 pero no tuve suerte. En segundo lugar, si hago zoom en la página, el div derecho se desliza debajo del div izquierdo, no es una visualización fluida.

Nota: lo siento, he buscado mucho. Esta pregunta se ha hecho muchas veces, pero esas respuestas no me están ayudando. He explicado cuál es el problema en mi caso.

Espero que haya una solución para eso.

Gracias.

EDITAR: Lo siento, mi problema de HTML, había dos divs de "caja" en los lados izquierdo y derecho, tenían un relleno en%, por lo que el lado izquierdo mostró más relleno debido al mayor ancho. Lo sentimos, el CSS anterior funciona perfecto, su visualización fluida y fija, lo siento por hacer la pregunta incorrecta ...

— Waleed
fuente

1

Había dos cajas divs? ¿Qué es una caja div? Esta pregunta no está clara.

— John Ktejik

252

Pruebe un sistema como este en su lugar:

.container {
  width: 80%;
  height: 200px;
  background: aqua;
  margin: auto;
  padding: 10px;
}

.one {
  width: 15%;
  height: 200px;
  background: red;
  float: left;
}

.two {
  margin-left: 15%;
  height: 200px;
  background: black;
}

<section class="container">
  <div class="one"></div>
  <div class="two"></div>
</section>

Expandir fragmento

Solo necesita flotar un div si usa margen izquierdo en el otro igual al ancho del primer div. Esto funcionará sin importar el zoom y no tendrá problemas de subpíxeles.

— Dezman
fuente

1

No está ayudando, el zoom está arreglado ahora, dice arreglado, pero el div derecho ahora se desliza hacia abajo y se fija en esa posición

— Waleed

Probablemente haya estropeado algo, verifique su código o dígame el enlace a jsFiddle y lo miraré.

— dezman

aww hombre, lo siento. Los divs ya estaban arreglados por mi CSS anterior que di, es solo el div "box" en el lado izquierdo y derecho, tenía relleno y margen en%, porque el div derecho era corto, por eso, tenía un relleno y márgenes iguales. Lo siento ...

— Waleed

¿No debería <section>ser un <div>en su lugar?

— jvriesem

218

Esto es fácil con un flexbox:

#wrapper {
  display: flex;
}

#left {
  flex: 0 0 65%;
}

#right {
  flex: 1;
}

<div id="wrapper">
  <div id="left">Left side div</div>
  <div id="right">Right side div</div>
</div>

Expandir fragmento

— Christopher Moore
fuente

55

Agradable, flexbox es definitivamente el camino a seguir

— Julian Soro

44

Según este sitio, flex debería funcionar en el 94% de los navegadores. caniuse.com/#search=flex

— Adrian

8

@JoostS no es que el 94% de los diferentes navegadores disponibles (ya que siempre funciona en Chrome, Mozilla, IE, etc.), ¿no es que funciona el 94% del tiempo independientemente del navegador?

— Joe

66

Actualmente se sitúa en el 97 +%. Básicamente, diría que si no necesita apuntar a IE8, vaya con flexbox, en este caso y en otros. Las soluciones Flexbox son casi siempre más elegantes y más fáciles de razonar.

— Alan Thomas el

66

Si tiene un sitio web existente, no vaya nunca por el uso compartido del navegador, mire sus propios registros de tráfico. En la mayoría de mis sitios, IE8 representa solo alrededor del 0.01% del tráfico. Sin embargo ... He visto sitios específicos en los que la audiencia son usuarios de corporaciones, gobiernos u organizaciones sin fines de lucro que utilizan una gran cantidad de software heredado, y luego el antiguo uso del navegador IE puede ser sorprendentemente alto.

— cazort

95

Usando este CSS para mi sitio actual. ¡Funciona perfecto!

#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
}

— Waleed
fuente

49

Me alegra saber que encontraste y aceptaste tu propia respuesta, pero ¿qué es #sides? No está en tu pregunta original.

— JMD

2

Usando float: dejado en ambos hijos (#right) matará la altura del padre div (#wrapper). Entonces, esta solución depende del requisito. Es mejor dar flotación solo a un niño. (Queda # en su caso)

— Rahul Gandhi

8

Aquí está mi respuesta para aquellos que están buscando en Google:

CSS:

.column {
    float: left;
    width: 50%;
}

/* Clear floats after the columns */
.container:after {
    content: "";
    display: table;
    clear: both;
}

Aquí está el HTML:

<div class="container">
    <div class="column"></div>
    <div class="column"></div>
</div>

— Malachi Bazar
fuente

3

Haz ambos divs así. Esto alineará ambos divs uno al lado del otro.

.my-class {
  display : inline-flex;
}

— Coen Damen
fuente

1

#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
}

<h1 id="left">Left Side</h1>
<h1 id="right">Right Side</h1>
<!-- It Works!-->

Expandir fragmento

— CoolPerson879
fuente

¿Cuál es el motivo del desbordamiento: oculto? No parece ser necesario ...

— Honza

0

   <div style="height:50rem; width:100%; margin: auto;">
    <div style="height:50rem; width:20%; margin-left:4%; margin- 
    right:0%; float:left; background-color: black;">

    </div>
    <div style="height:50rem; width:20%; margin-left:4%; margin- 
    right:0%; float:left;  background-color: black;">

    </div>
    <div style="height:50rem; width:20%; margin-left:4%; margin- 
    right:0%; float:left;  background-color: black;">

    </div>
    <div style="height:50rem; width:20%; margin-left:4%; margin- 
    right:0%; float:left;  background-color: black;">

    </div>
   </div>

Sin embargo, el margen derecho no es necesario.

— Towsif Ahmed Labib
fuente