CSS Div 100% con flotador: izquierda

Agrh, CSS: la ruina de mi vida. ¿Alguien puede ayudar aquí?CSS Div 100% con flotador: izquierda

Estoy tratando de obtener la siguiente distribución div:

******************************************************************************* 
*aaaaaaaaaa bbbbbbbbbbbb ccccccccccccccccccccccccccccccccccccccccccccccccccccc* 
*aaaaaaaaaa bbbbbbbbbbbb ccccccccccccccccccccccccccccccccccccccccccccccccccccc* 
*******************************************************************************

Actualmente mis estilos tener este aspecto:

#container { 
height:50px; 
} 

#a { 
float:left; 
width:50px; 
height:50px; 
} 

#b { 
float:left; 
width:50px; 
height:50px; 
} 

#c { 
float:left; 
width:100%; 
height:50px; 
} 

<div id="container"> 
    <div id="a" /> 
    <div id="b" /> 
    <div id="c" /> 
</div>

Pero esto está causando el siguiente a suceder (div c cae por debajo del otros):

******************************************************************************** 
*aaaaaaaaaa bbbbbbbbbbbb              * 
*aaaaaaaaaa bbbbbbbbbbbb              * 
*cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc* 
*cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc* 
********************************************************************************

¿Qué problema necesita la solución de este problema? Gracias.

Otros detalles:

A y B deben haber fija anchos de píxeles.
Este es un ejemplo simplificado: en realidad, los divs tienen bordes que no deben superponerse.

Fuente

2010-11-18 UpTheCreek

posible duplicado de [Ampliar div al ancho máximo cuando el flotador: izquierda se fija] (http://stackoverflow.com/questions/1017880/expand-div-to-max -width-when-floatleft-is-set) –

Simplemente no float el último div entonces va a funcionar. También elimina el ancho del 100% y dale un margen izquierdo del ancho de tus dos divisiones de ancho fijo. Esto debería tener este aspecto:

http://jsfiddle.net/YMQbh/

Fuente

2010-11-18 08:13:52 meo

Gracias. ¡Esa jsfiddle es una buena herramienta! – UpTheCreek

Gracias por esta respuesta simple pero bien explicada –

en primer lugar es mejor tener un contenedor con un ancho fijo. Lo siguiente es que el 100% con "c" es relativo al contenedor, por lo que abarcará todo el ancho del contenedor.

Actualización: Para decirlo más preciso: el c div no necesita flotar ni ancho. Al igual que otros ya dijeron: Un div (como elemento de nivel de bloque) se extiende por itselfe todo el ancho.

Fuente

2010-11-18 07:16:59 scheffield

Gracias. Entonces, ¿no hay forma de expandir el tercer div para llenar el espacio restante? – UpTheCreek

viene: http://www.html5rocks.com/tutorials/flexbox/quick/ –

lamentablemente tendremos que esperar, es decir, para ponerse al día –

Creo que simplemente dejando fuera el atributo de ancho para el c div debería hacer el trabajo. Normalmente los DIV abarcan todo el ancho que pueden obtener. Este ejemplo trabajado para mí:

<html> 
<head> 
    <style type="text/css"> 
     #a { 
      width: 50px; 
      height: 50px; 
      float: left; 

      background-color: #ffff00; 
     } 

     #b { 
      width: 50px; 
      height: 50px; 
      float: left; 
      background-color: #ff00ff; 
     } 

     #c { 
      height: 50px; 
      background-color: #00ffff; 
     } 
    </style> 
</head> 
<body> 
    <div id="a"></div> 
    <div id="b"></div> 
    <div id="c"></div> 
</body> 
</html>

Fuente

2010-11-18 07:22:38 philgiese

Sin y ancho en c, simplemente se expande lo suficiente como para contener los contenidos, tal vez porque es flotante: ¿a la izquierda? – UpTheCreek

Yapp. Simplemente deja esto como lo demostró mi ejemplo. Y por cierto. ¡Usa Firebug! Allí puede agregar/eliminar/deshabilitar/cambiar fácilmente las propiedades de CSS mientras visualiza la página. De esa forma descubro la mayoría de mis errores de CSS. – philgiese

Pero sin el flotador los bordes están en mal estado. – UpTheCreek

#container { 
float:left 
width:100% /*for liquid layout*/ 
width:960px /*fixed layout*/ 
height:50px; 
} 

#a { 
float:left; 
width:50px; 
/*or*/ 
width:5%; 
height:50px; 
} 

#b { 
float:left; 
width:50px; 
/*or*/ 
width:5%; 
height:50px; 
} 

#c { 
float:left; 
width:90%; 
/*or*/ 
width:860px; /* subtract the sum of the container a+b from the container c. */ 
height:50px; 
} 

<div id="container"> 
    <div id="a" /> 
    <div id="b" /> 
    <div id="c" /> 
</div>

Si se agrega el relleno, margen derecha o izquierda o ambas debe restar de la anchura total también.

Fuente

2010-11-18 07:23:44 chchrist

Debería haber agregado en la pregunta, que a y b deben tener un ancho de píxel. – UpTheCreek

Es por eso que he agregado dos valores (en px y en%) – chchrist

En lugar de #c flotante, le daría un margin-left y dejaría el width como automático.

Fuente

2010-11-18 07:28:08

Intenté eso, pero lamentablemente sin el flotador en c, los bordes se superponen con ayb causando problemas. – UpTheCreek

También puede establecer un margen en '# b' y modificar el margen' # b' y '# c' según sus bordes. –

Aquí van:

<div style='width:200px;background:yellow;float:left'>One</div> 
<div style='width:200px;background:orange;float:left'>Two</div> 
<div style='background:khaki'>Three</div>

Puede ajustar OneTwo y anchos como sea necesario. Probado trabajando en FF 3.6, IE 8, Safari 4.0, Chrome 3.195.

EDITAR

Ahora, con fronteras:

<div style='width:200px;background:yellow;float:left;border:1px solid red;margin:0 -1px;'>One</div> 
<div style='width:200px;background:orange;float:left;border:1px solid green;margin:0 -1px'>Two</div> 
<div style='background:khaki;border:1px solid black;margin-left:400px'>Three</div>

EDIT 2

-no superposición de fronteras (y el contraste de colores), caliente de la prensa:

<div style='width:200px;background:yellow;float:left;border:1px solid red;margin:0 -1px;'>One</div> 
<div style='width:200px;background:orange;float:left;border:1px solid blue;margin:0 -1px 0 1px'>Two</div> 
<div style='background:purple;border:1px solid orange;margin-left:403px'>Three</div>

Fuente

2010-11-18 07:29:45 Ben

Entonces los bordes de c interfieren con los bordes de ay b. – UpTheCreek

Fronteras? ¿Dónde están las fronteras en tu ejemplo? Pero dame un minuto, pondré fronteras. – Ben

Sí, lo siento, estaba mostrando un ejemplo simplificado: no me di cuenta de que eran importantes hasta que intenté eliminar el flotador. – UpTheCreek

No flote la div "c". Como elemento de bloque, ocupará naturalmente todo el ancho horizontal de la ventana gráfica.

Lo que se quiere hacer es simplemente usar un margen en el lado izquierdo de la "c" para dar "a" y "b" habitación de al lado "c"

Prueba esto:

#container { 
height:50px; 
} 

#a { 
float:left; 
width:50px; 
height:50px; 
border: 1px #000 solid; /* takes up 2px width - 1px on either side */ 
} 

#b { 
float:left; 
width:50px; 
height:50px; 
border: 1px #000 solid; /* takes up 2px width - 1px on either side */ 
} 

#c { 
/* 2x 50px wide div elements = 100 px 
* + 2x 1px left borders  = 2 px 
* + 2x 1px right borders  = 2 px 
*        ======= 
*        104 px 
*/ 
margin-left: 104px; 
}

Fuente

2010-11-18 07:31:00 AgentConundrum

Sin el flotador, los bordes de c se solapan con los bordes de ayb, esto causa problemas. – UpTheCreek

@UpTheCreek: los bordes son parte del ancho total de un elemento. Debe tenerlos en cuenta al determinar su margen: dejado en #c. Por ejemplo, si #a y #b tienen un borde de 1px, y suponiendo que no hay márgenes/relleno que también agreguen ancho, su ancho total sería 50px para el contenido, y 2px para el borde (1px a la izquierda + 1px a la derecha), dando ellos un ancho total de 52px cada uno, por lo que #c necesitaría tener un margen izquierdo de 104px, en lugar de los 100px, supongo que lo intentó. – AgentConundrum

Esta respuesta (http://stackoverflow.com/questions/4208939/padding-on-floating-elements/4209218#4209218) que escribí antes debería aclarar un poco las cosas. – AgentConundrum

CSS Div 100% con flotador: izquierda

Respuesta

Cuestiones relacionadas