Haciendo divisor div en lugar de caer a la nueva línea

¿Hay alguna manera de forzar a un div flotante a contraerse en vez de ir a una nueva línea?Haciendo divisor div en lugar de caer a la nueva línea

Sé que puedo establecer anchos implícitos en los divs, pero está en un menú que puede tener cantidades variables de elementos. Estoy tratando de hacer esto mientras mantengo fluido el diseño del sitio si es posible.

editada para mostrar código

<html> 
<head> 

    <style type="text/css"> 
    #left{ 
     float: left; 
     border: 1px solid #000; 
    } 

    #right{ 
     float: right; 
     border: 1px solid #000; 
    } 
</style> 

</head> 

<body> 

<div id="left"><p>This div represents the logo</p></div> 
<div id="right"><p>When the window's width is reduced and these divs touch 
    I want this div to shrink instead of falling to the next line. 
    </p> 
</div> 

</body> 

</html>

Básicamente, quiero #right a empezar a declinar cuando la ventana del navegador se contrae en lugar de tener que soltar una línea en primer lugar, a continuación, reducir el tamaño de la ventana cuando se cambia el tamaño más.

Fuente

2010-11-26 George Kendros

Uno de los efectos de Floating a DIv es que se "encoge" a su ancho intrínseco, por lo que deberá mostrar un código para que podamos determinar por qué también pasa a una nueva línea. –

Edité las publicaciones anteriores y agregué algunos códigos de ejemplo. –

¿Ha intentado experimentar dando estos dos anchos relativos (por ejemplo, un porcentaje)?

Cuando flote sin declarar explícitamente un ancho, fijo o relativo, las dimensiones se definirán por defecto en 'auto'. Auto obligará a div a ser el ancho de su contenido. Cuando el navegador se contrae, el contenido seguirá forzando estos cuadros a ese ancho, hasta que se vea forzado a colapsar tocando otro elemento.

El uso de anchos automáticos no es la mejor manera de lograr fluidez en su diseño. Tendrá que especificar algún tipo de dimensión relativa en alguna parte, de lo contrario, este problema será completamente inevitable.

Existen muchos recursos que pueden ayudarlo a lograr un diseño más fluido (muchos artículos en www.alistapart.com discuten esto con bastante profundidad).

Fuente

2010-11-26 23:24:02 Jon

Eso funcionó perfectamente. Acabo de imaginar que el ancho mínimo que quería admitir era, resté el ancho de mi logo div, luego tomé el ancho restante como un porcentaje (es decir, 700px min de ancho - 140px logo div = 560px u 80%) –

la propiedad de CSS display, ponerlo en inline y la div se comportará como un span.

Fuente

2010-11-26 01:17:52 cambraca

Todavía está cayendo a la siguiente línea. La línea tiene un elemento flotante izquierdo y un elemento flotante derecho (el logotipo flotaba a la izquierda, el menú flotaba a la derecha) –

¿Puedes mostrar algún código para que podamos ver lo que está pasando? – cambraca

Edité mi publicación original con algún código. –

Haciendo divisor div en lugar de caer a la nueva línea

Respuesta

Cuestiones relacionadas