Expanda div al ancho máximo cuando se establece float: left

115

Tengo algo como eso:

<div style="width:100px;float:left">menu</div>
<div style="float:left">content</div>

Ambos flotadores son necesarios. Quiero que el div de contenido llene toda la pantalla menos esos 100px para el menú. Si no uso float, el div se expande exactamente como debería. Pero, ¿cómo configuro esto cuando se establece float? Si uso algo como

style=width:100%

luego, el div de contenido obtiene el tamaño del padre, que es el cuerpo u otro div que también probé, por lo que, por supuesto, no se ajusta a la derecha del menú y se muestra a continuación.

html width Flo
fuente

138

Espero haberte entendido correctamente, echa un vistazo a esto: http://jsfiddle.net/EAEKc/

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Content with Menu</title>
  <style>
    .content .left {
      float: left;
      width: 100px;
      background-color: green;
    }
    
    .content .right {
      margin-left: 100px;
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="left">
      <p>Hi, Flo!</p>
    </div>
    <div class="right">
      <p>is</p>
      <p>this</p>
      <p>what</p>
      <p>you are looking for?</p>
    </div>
  </div>
</body>

</html>

Expandir fragmento

merkuro
fuente

5

La pregunta dice "ambas carrozas son necesarias".

Crescent Fresh

8

Sí, tienes razón y estoy de acuerdo. Sin embargo, creo que Flo solo mencionó esto, ¡porque cree que son ambos! necesitaba obtener el diseño deseado y, por lo tanto, mi solución alternativa.

merkuro

@merkuro: buen punto. Estoy de acuerdo, ".right" no necesita flotar para obtener el efecto deseado. @Flo: ¿puede confirmar, debe flotar el div de contenido? ¿Como por otras razones?

Crescent Fresh

podría funcionar, intentaré un poco con eso, tienes la razón correcta, y el flotador es más agradable, pero me imagino que simplemente no funcionará

Flo

2

Ahh jeah y yo volvemos a ver la razón por la que lo cambié para flotar: Ie7 y Firefox funcionan bien, pero ie 5.5 y ie 6 comienzan el margen en el borde derecho del div izquierdo, por lo que tiene 236px (el ancho real, 100 fue un ejemplo) brecha entre ambos divs

Flo

100

La forma más compatible que he encontrado de hacer esto no es muy obvia. Debe quitar el flotador de la segunda columna y aplicarlo overflow:hidden. Aunque esto parecería estar ocultando cualquier contenido que salga del div, en realidad obliga al div a permanecer dentro de su padre.

Usando su código, este es un ejemplo de cómo se podría hacer:

<div style="width: 100px; float: left;">menu</div>
<div style="overflow: hidden;">content</div>

Espero que esto sea útil para cualquiera que tenga este problema, es lo que encontré que funciona mejor para el sitio que estaba construyendo, después de intentar ajustarlo a otras resoluciones. Desafortunadamente, esto no funciona si también incluye un flotador derecho divdespués del contenido, si alguien conoce una buena manera de hacer que funcione, con una buena compatibilidad con IE, me encantaría escucharlo.

Nueva y mejor opción usando `display: flex;`

Ahora que el modelo Flexbox está bastante implementado, recomiendo usarlo en su lugar, ya que permite mucha más flexflexibilidad con el diseño. Aquí hay una simple dos columnas como la original:

<div style="display: flex;">
    <div style="width: 100px;">menu</div>
    <div style="flex: 1;">content</div>
</div>

¡Y aquí hay una columna de tres columnas con una columna central de ancho flexible!

<div style="display: flex;">
    <div style="width: 100px;">menu</div>
    <div style="flex:1;">content</div>
    <div style="width: 100px;">sidebar</div>
</div>

alanaktion
fuente

Después de algunas pruebas adicionales, parece que no es necesario activar hasLayout con "position: related" para que esto funcione en IE 6, no estoy seguro de IE 5, pero generalmente no es un problema incluirlo de todos modos. Solo para estar seguros.

alanaktion

1

Esta respuesta parece poco apreciada, pero es realmente bueno saberlo. Este te permite flotar, incluso con un elemento flotante dentro del div. Soy un "contexto de formato de bloque" de Google. ahora mismo.

Carlos Gil

La mejor manera es usar una tabla simple de 2 columnas en lugar de perder el tiempo agregando toneladas de trucos CSS no compatibles con navegadores cruzados

Marco Demaio

@Marco Necesitaba usar CSS para esto ya que mi diseño responde. Los diferentes tamaños de pantalla necesitaban diferentes diseños, por lo que una tabla no habría funcionado. Además, este método parece funcionar básicamente en cualquier navegador que todavía se use.

alanaktion

1

@MarcoDemaio, mi punto fue que en un tamaño de pantalla donde la columna fija más pequeña sería tan grande como la columna principal, como en un dispositivo móvil, quería que las dos columnas se convirtieran en filas de ancho completo, lo que no se podía hacer con tablas a menos que realmente quisiera mover contenido con JavaScript.

alanaktion

31

Solución sin fijar tamaño en su margen

.content .right{
    overflow: auto; 
    background-color: red;
}

+1 para Merkuro, pero si el tamaño del flotador cambia, su margen fijo fallará. Si usa el CSS de arriba a la derecha div, cambiará muy bien de tamaño con el cambio de tamaño en el flotador izquierdo. Es un poco más flexible así. Compruebe el violín aquí: http://jsfiddle.net/9ZHBK/144/

Marchitar
fuente

2

@alanaktion Me llevé el auto innecesario. La diferencia está en el valor de desbordamiento. Al parecer overflow: hiddeny overflow autoresultan en el mismo comportamiento. También creo que la gente aprecia el Fiddle.

March

Si alguien quiere saber por qué funciona esto, consulte aquí: stackoverflow.com/a/1767270/2756409

TylerH

Creo que esto es mejor que la solución de Merkuro.

SkuraZZ

6

Los elementos flotantes se eliminan del diseño de flujo normal y los elementos de bloque, como los DIV, ya no abarcan el ancho de su padre. Las reglas cambian en esta situación. En lugar de reinventar la rueda, visite este sitio para ver algunas posibles soluciones para crear el diseño de dos columnas que busca: http://www.maxdesign.com.au/presentation/page_layouts/

Específicamente, el "Diseño líquido de dos columnas".

¡Salud!

Sean Aitken
fuente

4

Esta es una solución actualizada para HTML 5 si alguien está interesado y no le gusta "flotar".

La tabla funciona muy bien en este caso, ya que puede establecer el ancho fijo para la tabla y la celda de la tabla.

.content-container{
    display: table;
    width: 300px;
}

.content .right{
    display: table-cell;   
    background-color:green;
    width: 100px;
}

http://jsfiddle.net/EAEKc/596/ código fuente original de @merkuro

Snowie
fuente

+1 finalmente algo que funcione con el elemento de ancho fijo a la derecha, incluso si técnicamente no usa float.

Karthik T

+1 así que totalmente sí. después de años de luchar con flotadores, posiciones y tablas, esta es la solución correcta. la solución aceptada propaga CSS inseguro.

Horacio

4

este uso puede resolver su problema.

width: calc(100% - 100px);

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Content with Menu</title>
  <style>
    .content .left {
      float: left;
      width: 100px;
      background-color: green;
    }
    
    .content .right {
      float: left;
      width: calc(100% - 100px);
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="left">
      <p>Hi, Flo!</p>
    </div>
    <div class="right">
      <p>is</p>
      <p>this</p>
      <p>what</p>
      <p>you are looking for?</p>
    </div>
  </div>
</body>

</html>

Expandir fragmento

suathd
fuente

Bienvenido a SO. ¿Podría agregar una explicación de cómo funciona esto?

yacc

3

Y según merkurola solución de, si desea maximizar la de la izquierda, debe usar:

<!DOCTYPE html>   
<html lang="en">     
    <head>              
        <meta "charset="UTF-8" />   
        <title>Content with Menu</title>                 
        <style>
            .content .left {
                margin-right: 100px;
                background-color: green;
            }
            .content .right {
                float: right;
                width: 100px;
                background-color: red;
            }
        </style>              
    </head>
    <body>        
        <div class="content">
            <div class="right">  
                <p>is</p>
                <p>this</p>
                <p>what</p>
                <p>you are looking for?</p>
            </div>
            <div class="left">
                <p>Hi, Flo!</p>
            </div>
        </div>
    </body>
</html>

No se ha probado en IE, por lo que puede parecer roto en IE.

kubilayeksioglu
fuente

1

La respuesta aceptada podría funcionar, pero no me gusta la idea de márgenes superpuestos. En HTML5, haría esto con display: flex;. Es una solución limpia. Simplemente configure el ancho para un elemento y flex-grow: 1;para el elemento dinámico. Una versión editada de merkuros fiddle: https://jsfiddle.net/EAEKc/1499/

Christoph Bühler
fuente

0

Hola, hay una manera fácil con el método oculto de desbordamiento en el elemento derecho.

    .content .left {
        float:left;
        width:100px;
        background-color:green;
      }
      .content .right {
        overflow: hidden;
        background-color:red;
      }

<!DOCTYPE html>   
<html lang="en">     
    <head>      
           
        <title>Content Menu</title>         
          
    </head>
    <body>    
    <div class="content">
      <div class="left">
        <p>Hi, Flo! I am Left</p>
      </div>
      <div class="right">  
        <p>is</p>
        <p>this</p>
        <p>what</p>
        <p>you are looking for?</p>
        <p> It done with overflow hidden and result is same.</p>
      </div>
    </div>
    </body>
</html>

Expandir fragmento

Sanjib Debnath
fuente

-1

Esto podría funcionar:

    div{
    display:inline-block;
    width:100%;
    float:left;
    }

kirtan-shah
fuente

Expanda div al ancho máximo cuando se establece float: left

Respuestas:

Nueva y mejor opción usando display: flex;

Solución sin fijar tamaño en su margen

Nueva y mejor opción usando `display: flex;`