css - poner - posicionar div abajo

Dos divs uno al lado del otro-Fluid display

Question

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

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

El HTML es simple, dos div izquierdo y derecho en un div envoltorio.

<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 en otros sitios, pero no he podido encontrar la ayuda exacta.

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

Nota: Lo siento, he buscado mucho. Esta pregunta se ha hecho muchas veces, pero esas respuestas no me ayudan. Ya expliqué cuál es el problema en mi caso.

Espero que haya una solución para eso.

Gracias.

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

Answer 1

Esto es fácil con un flexbox:

#wrapper {
display: flex;
}
#left {
flex: 0 0 65%;
}
#right {
flex: 1;
}

Answer 2

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;
}

Answer 3

Fiddle

Pruebe un sistema como este en su lugar:

HTML:

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

CSS:

.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;
}

Solo necesitas hacer flotar un div si usas margin-left en el otro igual al ancho del primer div. Esto funcionará sin importar el zoom y no tendrá problemas de subpíxeles.