Div lado a lado sin flotante

Question

¿Cómo puedo hacer que div 'izquierda' y 'derecha' parezcan columnas una al lado de la otra?

Sé que puedo utilizar float: a la izquierda en ellos y que va a funcionar ... pero en el paso 5 y 6 en http://www.barelyfitz.com/screencast...s/positioning/ aquí el chico dice que es posible, no puedo conseguir que funcione aunque ...

Código:

<style> 
div.left { 
    background:blue; 
    height:200px; 
    width:300px; 
} 

div.right{ 
    background:green; 
    height:300px; 
    width:100px; 
} 

.container{ 
    background:black; 
    height:400px; 
    width:450px; 
} 
</style> 

<div class="container"> 
     <div class="left"> 
      LEFT 
     </div> 
     <div class="right"> 
      RIGHT 
     </div> 
</div> 

Answer 1

El método habitual cuando no se utiliza float s es usar display: inline-block: http://www.jsfiddle.net/zygnz/1/

.container div { 
    display: inline-block; 
} 

hacer la nota de sus limitaciones sin embargo: Hay un espacio adicional después del primer bloque - esto se debe a que los dos bloques son ahora esencialmente inline elementos, como a y em, por lo que los espacios en blanco entre los dos cargos. Esto podría romper su diseño y/o no verse bien, y preferiría no quitar todos los espacios en blanco entre los personajes por el bien de este trabajo.

Los flotadores son también más flexibles, en la mayoría de los casos.

Answer 2

Usted puede tratar con un margen de div derecho

margin: -200px 0 0 350px; 

Answer 3

A div es block level element, lo que significa que se comportará como un bloque y los bloques no pueden permanecer uno al lado del otro sin flotar. No obstante, usted les puede fijar a inline elements con:

display:inline-block; 

darle una oportunidad ...

---

Otra forma es colocarlos usando:

position:absolute; 
left:0; 

y/o

position:absolute; 
right:0; 

Nota: Para que funcione como se espera, el elemento de envoltura debe tener un position:relative; para que los elementos con posicionamiento absoluto permanezcan en relación con su elemento de envoltura.

Answer 4

También puede usar el diseño de CSS3 flexbox, que es well supported hoy en día.

.container { 
    display: flex; 
    flex-flow: row nowrap; 
    justify-content: space-between; 
    background:black; 
    height:400px; 
    width:450px; 
} 

.left { 
    flex: 0 0 300px; 
    background:blue; 
    height:200px; 
} 

.right { 
    flex: 0 1 100px; 
    background:green; 
    height:300px; 
} 

See Example (con estilos de legado para una máxima compatibilidad) & Learn more sobre FlexBox.

Answer 5

Actualmente estoy trabajando en esto, y ya tengo una serie de soluciones. Es bueno tener un sitio de alta calidad, que también pueda usar para mi conveniencia. Porque si no escribe estas cosas, eventualmente olvidará algunas partes. Y también puedo recomendar escribir algunos básicos si está comenzando cualquier tipo de programación/diseño nuevo.

Así que si las funciones de flotación están causando problemas, hay un par de opciones que puede probar.

Uno es modificar la alineación de div en la etiqueta div a sí mismo como <div class="kosher" align=left> Si esto no le conviene, entonces hay otra opción con un margen como ese.

.leftdiv { 
    display: inline-block; 
    width: 40%; 
    float: left; 
} 
.rightdiv { 
    display: block; 
    margin-right: 20px; 
    margin-left: 45%; 
} 

No olvides eliminar el <div align=left>.

Answer 6

Uso display:table-cell; para la eliminación de espacio entre .Left y .RIGHT

div.left { 
 
    background:blue; 
 
    height:200px; 
 
    width:300px; 
 
} 
 

 
div.right{ 
 
    background:green; 
 
    height:300px; 
 
    width:100px; 
 
} 
 

 
.container{ 
 
    background:black; 
 
    height:400px; 
 
    width:450px; 
 
} 
 

 
.container > div { 
 
    display: table-cell; 
 
}

<div class="container"> 
 
    <div> 
 
    <div class="left"> 
 
     LEFT 
 
    </div> 
 
    </div> 
 
    <div> 
 
    <div class="right"> 
 
     RIGHT 
 
    </div> 
 
    </div> 
 
</div>