¿Cómo colocar tres divs en html horizontalmente?

Estoy creando un sitio web de muestra que tiene tres divisiones horizontalmente. Quiero que el div más izquierdo sea del 25% de ancho, el del medio tenga un 50% de ancho y el derecho sea de un 25% de ancho para que las divisiones llenen todo el espacio al 100% horizontalmente.

  Website Title  
Left Side Menu
Random Content
Right Side Menu

View post on imgur.com

Cuando ejecuto este código, los divs aparecen uno encima del otro. ¡Quiero que aparezcan uno al lado del otro!

¿Cómo puedo hacer esto?

Me abstendría de usar carrozas para este tipo de cosas; Prefiero usar inline-block .

Algunos puntos más a considerar:

  • Los estilos en línea son malos para la mantenibilidad
  • No debe tener espacios en los nombres de selector
  • Te perdiste algunas tags HTML importantes, como y
  • No doctype un doctype

Esta es una mejor forma de formatear su documento:

    Website Title    
Left Side Menu
Random Content

Aquí hay un jsFiddle por si acaso .

Sé que esta es una pregunta muy antigua. Solo publicando esto aquí mientras resuelvo este problema usando FlexBox . Aquí está la solución

 #container { height: 100%; width: 100%; display: flex; } #leftThing { width: 25%; background-color: blue; } #content { width: 50%; background-color: green; } #rightThing { width: 25%; background-color: yellow; } 
 
Left Side Menu
Random Content
Right Side Menu

Puede usar elementos flotantes de esta manera:

 
Left Side Menu
Random Content
Right Side Menu

Tenga en cuenta el desbordamiento: oculto; en el contenedor principal, esto es para que el elemento primario crezca y tenga las mismas dimensiones que los elementos secundarios (de lo contrario, tendrá una altura de 0).

La forma más fácil
Veo que la pregunta está respondida. Doy esta respuesta a los que tienen esta pregunta en el futuro.


No es una buena práctica codificar css en línea, y también ID para todos los div internos, siempre trate de usar la clase para diseñar. Usar css en línea es una muy mala práctica si está tratando de ser un diseñador web profesional.

aquí en su pregunta, he dado una clase contenedora para el div principal y todos los div interiores están divs secundarios en css, puede llamar div interno usando el selector nth-child .

Quiero señalar algunas cosas aquí

1 – No use CSS en línea (es una práctica muy mala)

2 – Trate de usar clases en lugar de identificadores porque si proporciona una identificación, puede usarla solo una vez, pero si usa una clase puede usarla muchas veces y también puede usar estilos de esa clase para escribir menos código.


enlace de codepen para mi respuesta

https://codepen.io/feizel/pen/JELGyB


  .wrapper{width:100%;} .box{float:left; height:100px;} .box:nth-child(1){ width:25%; background-color:red; } .box:nth-child(2){ width:50%; background-color:green; } .box:nth-child(3){ width:25%; background-color:yellow; } 
 
Left Side Menu
Random Content
Right Side Menu

Usted agrega un

 float: left; 

al estilo de los 3 elementos y asegúrese de que el contenedor padre tiene

 overflow: hidden; position: relative; 

esto asegura que los flotadores ocupen espacio real.

   Website Title    
Left Side Menu
Random Content
Right Side Menu

También tenga en cuenta que el ancho: 100% y la altura: 100% deben retirarse del contenedor, de lo contrario, el tercer bloque se ajustará a una segunda línea.

Deshágase de la position:relative; y reemplazarlo con float:left; y float:right; .

Ejemplo en jsfiddle: http://jsfiddle.net/d9fHP/1/

    Website Title  
Left Side Menu
Random Content
Right Side Menu