CSS: Il div flottante a destra fa sì che div contenitore si estenda a tutta larghezza dello schermo in IE

Question

Ho visto una domanda simile here e non ho visto una risposta. Sto avendo un problema in cui un elemento è flottato a destra, all'interno di un div padre, e sta facendo sì che div divida l'intera larghezza della pagina in IE7. Questo non succede in nessun altro browser (Firefox e Chrome). Ho anche postato le foto dopo la domanda, per riferimento. Il codice HTML che sto utilizzando è qui sotto:

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

Il CSS che sto utilizzando per questi tag è al di sotto pure. Una cosa che ho notato coerente tra la domanda dell'altra persona di cui sopra, e il mio problema, è che entrambi i genitori div hanno applicato posizionamento (la persona sopra ha assoluto, ho risolto).

#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; 
} 

Si noti che la classe 'actions' è a virgola mobile. Se togli quel float, la mia scatola assomiglia a this. Ma con il galleggiante aggiunto, estende l'intero schermo e assomiglia a this. È un bug noto come IE, perché non sta succedendo in nessun altro browser e mi sta facendo impazzire.

Per coloro che si chiedono, ho avuto il contenuto nel div "azioni", ma ho rimosso tutto fino al problema radice.

Qualsiasi assistenza sarebbe molto apprezzata. Grazie mille.

Answer 1

Fate questo

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

e quindi aggiungere una classe CSS

-Test { float: right; }

dovrebbe farlo, fateci sapere se non funziona.

MNK

Answer 2

Hai bisogno di una larghezza: * Un galleggiava scatola deve avere una larghezza esplicito (assegnato tramite la proprietà 'width', o la sua larghezza intrinseca nel caso di elementi sostituiti). *

via: W3C

Answer 3

io non sono del tutto sicuro di quello che si vuole, come non avete spiegare che cosa si voleva fare con il div "azioni", ma se si voleva la "azioni" div a flottato proprio accanto al div "Testing", ho appena provato a creare una classe .floatr separata, o funzionerà anche se applichi lo stile direttamente a div.

.floatr { 
float: right; 
} 

con .floatr di classe, si applicano che a "azioni" div:

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

non so perché, ma mi sembra che "le azioni" div sta ignorando l'impostazione galleggiante la classe che hai impostato in quel modo. Personalmente preferisco applicare più classi a div, il che mi permette di riutilizzare quella classe rispetto ad altre div per le quali voglio quell'effetto, ma ho sentito che alcuni browser ignoreranno qualsiasi classe dichiarata dopo la prima. Oh bene, non ho ancora incontrato questo problema con i principali browser ...

Oh aspetta.

Ho controllato di nuovo il codice, e penso che tu abbia appena avuto un problema con come hai impostato le tue lezioni. Il tuo "azioni" div mancava fuori sull'azione, prova ad aggiungere una virgola per CSS:

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

Credo che a volte di capire qualcosa che devi applicare effetti direttamente per assicurarsi che può comportarsi nel modo che ci si aspetta a, e quindi probabilmente la figura è un errore di sintassi sorta se funziona. eh.