CSS: Div flotante a la derecha hace que el contenedor div se estire en toda la anchura de la pantalla en IE

Question

Vi una pregunta similar here, y no vi una respuesta. Tengo un problema donde un elemento se flota correctamente, dentro de un div principal, y está causando que div divida todo el ancho de la página en IE7. Esto no ocurre en ningún otro navegador (Firefox y Chrome). También publiqué fotos después de la pregunta, como referencia. El HTML que estoy usando es el siguiente:

<div id="journal" class="journalIE"> 
    <div class="title_bar"> 
     <div> 
      Testing 
     </div> 
     <div class="actions"></div> 
     <div class="clear"></div> 
    </div> 
</div> 

la CSS que estoy usando para estas etiquetas está por debajo también. Una cosa que noté consistente entre la pregunta de la otra persona mencionada anteriormente, y mi problema, es que los padres div tienen posicionamiento aplicado (la persona de arriba tiene absoluto, lo he arreglado).

#journal 
{ 
    z-index: 1; 
} 

.journalIE 
{ 
    right: 1px; 
    bottom: 18px; 
    position: fixed; 
} 

#journal .title_bar 
{ 
    background: #F3F3F3; 
    border: 1px solid #C5D6E8; 
    color: #363638; 
    font-size: 11pt; 
    font-weight: bold; 
    height: 20px; 
    padding: 4px; 
    margin-bottom: 4px; 
} 

#journal .title_bar .actions 
{ 
    float: right; 
} 

.clear 
{ 
    clear: both; 
} 

Observe que la clase 'acciones' se flota a la derecha. Si elimino ese flotador, mi caja se ve como this. Pero con el flotador agregado, se extiende toda la pantalla, y se ve como this. ¿Es esto un error conocido de IE, porque no está sucediendo en ningún otro navegador y me está volviendo loco?

Para aquellos que se preguntan, tuve contenido en el div 'acciones', pero he eliminado todo hasta el problema raíz.

Cualquier ayuda sería muy apreciada. Muchas gracias.

Answer 1

Haga esto

<div id="journal" class="journalIE"> 
<div class="title_bar"> 
    <div class="Test"> 
     Testing 
    </div> 
    <div class="actions"></div> 
    <div class="clear"></div> 
</div> 

y luego añadir una clase CSS

.TEST { float: right; }

debería hacerlo, avísenos si no funciona.

MNK

Answer 2

Se necesita una anchura de: * Un flotado caja debe tener una anchura explícita (establecida desde la propiedad 'width', o su anchura intrínseca en el caso de elementos sustituidos). *

a través de: W3C

Answer 3

No estoy del todo seguro de lo que quiere, ya que no explicó lo que quería hacer con el "acciones" div, pero si quieres la "acciones" a div flotar justo al lado del div "Testing", simplemente intenté hacer una clase .floatr por separado, o también funcionará si solo aplicas estilo directamente a div.

.floatr { 
float: right; 
} 

con .floatr clase, que se aplican a "acciones" div:

<div class="actions floatr"></div> 

No sé por qué, pero me parece que las "acciones" div está ignorando el ajuste de flotación la clase que estableces de esa manera. Personalmente prefiero aplicar varias clases a los divs, lo que me permite reutilizar esa clase en lugar de otros divs para los que deseo ese efecto, pero he oído que algunos navegadores ignorarán cualquier clase declarada después de la primera. Bueno, todavía no me he encontrado con ese problema con los principales navegadores ...

¡Oh, espera!

Revisé el código de nuevo, y creo que acabas de tener un problema con la configuración de las clases. Su "acciones" div estaba perdiendo la acción, trate de añadir una coma a CSS:

#journal .title_bar, .actions 
{ 
    float: right; 
} 

supongo veces que pensar en algo que tienes que aplicar efectos directamente para asegurarse de que puede comportarse de la manera que usted espera y, probablemente, suponga que es un error de sintaxis sorta si funciona. heh.