html - texto - CSS lado a lado div con píxeles y porcentajes de ancho

separar texto en html

Question

Tengo dos div (lado a lado) dentro de un div padre, quiero que el div derecho ocupe el 100% del espacio restante (es decir, 100% - 200px) y siempre debería estar al lado del div izquierdo (no debajo del div izquierdo):

<div id="wrapper" style="width: 100%;">
    <div id="left" style="background-color: Blue; height: 100px; float: left; width: 200px;"></div>
    <div id="right" style="background-color: Aqua; height: 100px; float: left; width: 100%;"></div>
    <div style="clear: both;"></div>
</div>

Answer 1

Agregue propiedades de posición a su div derecha. La izquierda div 200px y la derecha div ocupan el espacio restante.

#right{
    background-color:Aqua;
    height:100px;
    position:absolute;
    top:0;
    right:0;
    left:200px;
}

Ver ejemplo de funcionamiento en http://jsfiddle.net/EpA5F/1/

Answer 2

Como solo tienes una columna de ancho fijo, flota hacia la izquierda y ya está. En cuanto a la segunda columna, no especifique float y width; Esto asegura que es 100% ancho. Pero debes agregar un margen izquierdo; de lo contrario, la segunda columna interferirá con la columna flotada, por ejemplo,

• el fondo aqua aparecerá detrás del fondo azul (desactive el fondo azul para ver a qué me refiero)
• Si la segunda columna se vuelve más alta que la primera, el contenido adicional comenzará a aparecer debajo de la primera columna.

<div id="wrapper">
    <div id="left" style="background-color: Blue; height: 100px; float: left; width: 200px;"></div>
    <div id="right" style="background-color: Aqua; height: 100px; margin-left: 200px;"></div>
    <div style="clear: both;"></div>
</div>

Answer 3

La respuesta aceptada es buena, pero tuve un problema en el que la columna de la derecha se superponía a mi subnavegación porque también estaba flotando.

Con los navegadores modernos, ahora puede tener todos los elementos flotantes y obtener el mismo efecto con un CSS más fresco. Utilizando "width: calc (100% - 380px);" significa que puedes flotar tus elementos, posicionarlos adecuadamente y lucir genial ...

.container { float: left; width: 100%; }
.container__left { float: left; width: 380px; height: 100px; background: blue; }
.container__right { float: right; width: calc(100% - 380px); height: 100px; background: green; }

Demostración http://jsfiddle.net/auUB3/1/

Answer 4

Ok, así que en los navegadores más nuevos podremos usar display: box; y box-flex: 1, ... propiedades. Actualmente estoy usando esto en un proyecto web donde solo se requiere Chrome, por lo que este nuevo elemento CSS3, resolvió muchos problemas para mí.

Answer 5

Si quieres que div tenga ancho constante:

 <div style="position:relative">
   <div class=''wrapper''>
      <div style="width: 70%"></div>
      <div style="width: 20%"></div>
      <div style="width: 10%"></div>
      <div style="clear:both"></div>
   </div>
   <div class="constant-width"><div>
 </div>

Y CSS

 .wrapper{
     margin-right: CONSTANTpx;
 }
 .wrapper div{
     float:left;
 }
 .constant-width{
     top: 0px; right:0px; position:absolute;
     width: CONSTANTpx
 }

Funciona bien sin fronteras.

JSFiddle

Answer 6

hacer que la envoltura principal float . También es probable que desee eliminar el width: 100% en la segunda división secundaria. Y tiene su ancho establecido por la cantidad de contenido dentro. O podrías tener un porcentaje para ambos divs de niños. Ejemplo 30% y 70% .

Demo aquí

Answer 7

su div izquierda debe tener flotar a la izquierda y su ancho de píxel usando la posición relativa. Su div derecha solo debe tener posición relativa y tal vez un desbordamiento oculto. Esto debería solucionar su problema. No es necesario utilizar el div que limpia el flotador.