No se pueden organizar dos divs uno al lado del otro

De acuerdo, entonces sé que hay algunas preguntas similares a esta en StackOverflow que ya han sido respondidas, pero no me han ayudado.

Estoy construyendo un servicio de mensajería y para eso tengo dos divs, contacts_box (300px) y message_box (500px). Ambas están envueltas en un div principal que tiene 800px de width . Quiero align estos dos divs uno al lado del otro en el div principal. Pero no importa lo que haga, ¡no puedo hacer que se alineen!

Por favor, eche un vistazo a mi HTML y CSS y muestre dónde me equivoco con esto.

 * { margin: 0; padding: 0; } .page_layout { position: fixed; top: 50px; width: 100%; height: 100%; border: 1px solid green; } .page_container { width: 800px; height: 100%; margin: 0 auto; clear: both; border: 1px solid blue; } // Contacts Box and its elements .contacts_box { float:left; height:100%; width:300px; border:1px dashed magenta; } // Message Box and its elements .message_box { float:right; height:100%; width:500px; border:1px dashed lemonchiffon; } 
      
CONTACTS BOX
Message Box

Puede usar box-sizing para resolver el problema en lugar de calcular el ancho y el ancho del borde:

Agregue box-sizing: border-box a los contenedores internos y box-sizing: content-box al contenedor exterior y listo.

 * { margin: 0; padding: 0; box-sizing: border-box; } .page_layout { position: fixed; top: 50px; width: 100%; height: 100%; border: 1px solid green; } .page_container { width: 800px; height: 100%; margin: 0 auto; clear: both; border: 1px solid blue; box-sizing: content-box; } .contacts_box { float: left; height: 100%; width: 300px; border: 1px dashed magenta; } .message_box { float: right; height: 100%; width: 500px; border: 1px dashed lemonchiffon; } 
  
CONTACTS BOX
Message Box

La solución más básica: el borde de los divs no está incluido en el ancho. Entonces, o necesitas calcular el ancho como

 width1 + border1 + width2 + border2 = 800px 

o haz tu contenedor div más grande.

Ponga sus comentarios dentro /* Comments Goes Here */

cambie su ancho px a % y use box-sizing: border-box; a los divs flotantes.

 *{ margin:0; padding:0; } .page_layout { position:fixed; top:50px; width:100%; height:100%; border:1px solid green; } .page_container { width:800px; height:100%; margin: 0 auto; clear:both; border:1px solid blue; } .contacts_box { float:left; height:100%; width:40%; border:1px dashed magenta; box-sizing: border-box; } .message_box { float:right; height:100%; width:60%; border:1px dashed lemonchiffon; box-sizing: border-box; } 
 
CONTACTS BOX
Message Box

El problema: tiene bordes en ambos elementos ( .contact_box y .message_box ) y están tomando 1px de cada lado para que nunca encajen porque no hay suficiente espacio, le recomiendo que use la propiedad box-sizing:border-box; para estos casos, colocará los bordes del elemento en lugar de afuera, para que no tenga que preocuparse por ellos.

 .contacts_box { float:left; height:100%; width:300px; border:1px dashed magenta; box-sizing: border-box; } .message_box { float:right; height:100%; width:500px; border:1px dashed lemonchiffon; box-sizing: border-box; } 

Además, si está utilizando css puro (sin preprocesadores) use comentarios como este /* Comment */ para evitar problemas.

Tu método de comentario estuvo mal. en CSS de Vanilla, utilizamos /* Your comment */ para hacer comentarios.

// – es compatible con el tipo de preprocesadores LESS, SASS, Stylus.


Si ejecuta su código en el navegador, puede ver que ninguno de los CSS para contactbox y messagebox funcionaba.

 *{ margin:0; padding:0; } .page_layout { position:fixed; top:50px; width:100%; height:100%; border:1px solid green; } .page_container { width:800px; height:100%; margin: 0 auto; clear:both; border:1px solid blue; } /* Contacts Box and its elements */ .contacts_box { float:left; height:100%; width:300px; border:1px dashed magenta; } /* Message Box and its elements */ .message_box { float:right; height:100%; width:500px; border:1px dashed lemonchiffon; } 
      
CONTACTS BOX
Message Box

Usted da borde al DIV interno por lo que también agrega en su ancho real. De ser posible, dale color al DIV interno o expande el ancho DIV de los padres .

 * { margin: 0; padding: 0; } .page_layout { position: fixed; top: 50px; width: 100%; height: 100%; border: 1px solid green; } .page_container { width: 800px; height: 100%; margin: 0 auto; clear: both; border: 1px solid blue; } .contacts_box { float: left; height: 100%; width: 300px; background: blue; } .message_box { float: right; height: 100%; width: 500px; background: red; } 
      
CONTACTS BOX
Message Box

¡Tenemos que dejar de usar flotadores y comenzar a usar flex!

 * { margin: 0; padding: 0; box-sizing: border-box; } .page_layout { position: fixed; top: 50px; width: 100%; height: 100%; border: 1px solid green; } .page_container { display: flex; flex-direction: row; width: 800px; height: 100%; margin: 0 auto; border: 1px solid blue; } .contacts_box { flex: 1 0 300px; border: 1px dashed magenta; } .message_box { flex: 1 0 500px; border-left: 1px dashed lemonchiffon; } 
 
CONTACTS BOX
Message Box

Su contenedor con ancho: 300px y borde: 1px en su conjunto tiene un ancho de 301px. Intente cambiar su ancho a 299 px o hacer 802 px la caja más grande

       
CONTACTS BOX
Message Box

si desea agregar un borde, entonces reduzca el ancho con el mismo px, que está borrando fronteras, como 498 y 298 px res.

      
CONTACTS BOX
Message Box