property - instruccion float en css
Internet Explorer 6 y 7: los elementos flotados se expanden al 100% de ancho cuando contienen un elemento secundario flotante a la derecha. ¿Hay alguna solución? (8)
¿Qué hay de usar una tabla de una sola celda en lugar de la div externa? Es posible que necesite un poco más de trabajo para tener todo alineado correctamente, pero la tabla no se expande.
Tengo un div padres flotando a la izquierda, con dos div niños que necesito flotar a la derecha.
El div principal debe (si entiendo la especificación correctamente) ser tan ancho como sea necesario para contener las div secundarias, y así es como se comporta en Firefox et al.
En IE, el div principal se expande al 100% de ancho. Esto parece ser un problema con los elementos flotados que tienen hijos flotando a la derecha. Página de prueba:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Float test</title>
</head>
<body>
<div style="border-top:solid 10px #0c0;float:left;">
<div style="border-top:solid 10px #00c;float:right;">Tester 1</div>
<div style="border-top:solid 10px #c0c;float:right;">Tester 2</div>
</div>
</body>
</html>
Lamentablemente, no puedo arreglar el ancho de las div secundarias, por lo que no puedo establecer un ancho fijo en el elemento primario.
¿Existe una solución alternativa exclusiva de CSS para hacer que el elemento primario div tan ancho como los elementos secundarios secundarios?
Algo con lo que podrías comenzar es esto:
<DIV style="BORDER: #0c0 10px solid; FLOAT: left; MARGIN-LEFT: 100%;">
<DIV style="BORDER: #00c 10px solid;FLOAT: right;">
Tester 1
</DIV>
<DIV style="BORDER: #c0c 10px solid;FLOAT: right;">
Tester 2
</DIV>
</DIV>
El resultado de eso parece estar al menos en el estadio de lo que estás buscando. Obviamente, desearía ajustarlo según sus necesidades, y probablemente agregar alguna lógica css para aplicarlo solo al navegador <IE 7.
Si eso no es exactamente lo que está buscando, intente jugar con algunos márgenes negativos.
Aquí hay una solución que hace que el inline-block en inline-block funcione en IE6 como en http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ para hacer que los elementos se comporten más como flotación derecha <div>s :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Float with inline-block test</title>
<style type="text/css">
.container {
border-top: solid 10px green;
float: left;
}
.tester1,
.tester2 {
float: right;
}
.tester1 {
border-top: solid 10px blue;
}
.tester2 {
border-top: solid 10px purple;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.container {
text-align: right;
}
.tester1,
.tester2 {
float: none;
zoom: 1; display: inline;/* display: inline-block; for block-level elements in IE 7 and 6. See http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ */
}
</style>
<![endif]-->
</head>
<body>
<div class="container">
<div class="tester1">Tester 1</div>
<div class="tester2">Tester 2</div>
</div>
</body>
</html>
En primer lugar, ¿por qué no estás usando estilos en línea?
Utilizaría esto para apuntar IE con un archivo css separado:
<!--[if lt IE 7]>
<link rel="stylesheet" href="ie6.css" type="text/css" />
<![endif]-->
Sé que esta no es una pregunta directa, pero IE SIEMPRE es un dolor difícil de tratar. La mayoría de los diseñadores / desarrolladores que conozco crearán una hoja de estilo totalmente nueva para IE.
No pude encontrar una solución exclusiva de CSS que se adapte a sus necesidades, pero si desea utilizar una solución de JavaScript, tal vez el siguiente código puede ser útil. No modifiqué el estilo de los divs, solo agregué los identificadores main , sub1 y sub2 a tus divs.
var myWidth = document.getElementById(''sub1'').offsetWidth + document.getElementById(''sub2'').offsetWidth;
document.getElementById(''main'').style.width = myWidth;
Se me ocurrió una solución usando text-align: right y display: inline .
Prueba esto:
<div style="border-top:solid 10px #0c0; float: left;">
<div style="margin-top: 10px; text-align: right;">
<div style="border-top:solid 10px #c0c; display: inline;">Tester 2</div>
<div style="border-top:solid 10px #00c; display: inline;">Tester 1</div>
</div>
</div>
Tenga en cuenta que tuve que cambiar el orden de los cuadros "probador" en el marcado para que aparezcan de la misma manera que en el ejemplo. Creo que hay una alternativa que margin-top en el nuevo contenedor, pero no tengo tiempo para investigar en este momento.
Si quieres un estilo más limpio para todos los demás navegadores, prueba esto:
<div style="border-top:solid 10px #0c0; float: left;">
<div style="float: right;">
<div style="border-top:solid 10px #c0c; float: left;">Tester 2</div>
<div style="border-top:solid 10px #00c; float: left;">Tester 1</div>
</div>
</div>
Hay algunos problemas diferentes que pueden surgir cuando desea distribuir cosas alrededor de esos cuadros. Sin embargo, creo que esos problemas serán mucho más fáciles de resolver que este.
Espero que esto haya sido útil para ti.
Tuve el mismo problema y lo solucioné colocando el elemento secundario (que quería flotar a la derecha) con la posición: absoluta y derecha: 0. Le di al elemento primario el relleno correcto para hacer espacio para el elemento secundario ... ¡Vale la pena intentarlo, podría no funcionar en todas las aplicaciones!
Una solución muy hacky pero solo CSS que funciona bien en IE, Chrome y FF.
Tomé la solución de kaba, pero el problema era que funciona bien en IE, pero todos los demás navegadores muestran un espacio de 4 píxeles entre los dos elementos secundarios. El espacio permanece como 4px incluso si el contenido en ambos divs se expande. Entonces, para arreglar eso, he usado declaraciones condicionales de IE. No me veo como el mejor código del mundo, pero hace el trabajo bien.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Float test</title>
</head>
<body>
<div style="border-top:solid 10px #0c0; float: left;">
<div style="border-top:solid 10px #00c; text-align: right;">
<div style="border-top:solid 10px #c0c; display: inline;">Tester2</div>
<div style="border-top:solid 10px #00c; display: inline;margin-left:-4px">
<!--[if gte IE 5]>
<div style="border-top:solid 10px #00c; display: inline;margin-left:4px">
<![endif]-->
Tester1
<!--[if gte IE 5]>
</div>
<![endif]-->
</div>
</div>
</div>
</body>
</html>