Dos divs uno al lado del otro – Fluid display

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.

 
Left side 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 …

Violín

Pruebe un sistema como este en su lugar:

HTML:

 

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.

Esto es fácil con un flexbox:

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

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