Problemi con il float :|

13-07-2012, 14.36.02

Salve,
ho un problema con il float. Il fatto è che imposto il float del box e di tutti i suoi elementi su right e il width su auto. Pero gli elementi non vanno tutti a destra, alcuni vanno a sinistra! Il problema è che non posso impostare una width predefinita! Come posso risolvere? Ecco il codice!

Codice HTML:

<html>
<head>
<style>
.topbar {
    background-color: black; 
    width: 100%;
    height: 35px;
    position: fixed;
    display: block;
    overflow: hidden;
    margin: 0px;
}
.topbar-content {
    height: 35px;
    margin: 0px 3% 0px 3%;
    position: absolute;
    top:50%;
    margin-top: -19px;
    color: white;
    position: relative;
    padding: 0px;
    font-size: 12px;
}
.right-topbar {
    float: right;
    text-align: right;
    display: inline-block;
}
.search {
    width: 30px;
    height: 30px;
    margin: 0px;
    padding: 0px;
    display: inline-block;
    float: left;
    text-align: left;
}
.menu-box {
    margin: 0px; 
    float: right; 
    width: auto; 
    height: 35px; 
    padding: 0px;
    display: inline-block;
    text-align: right;
}
.menu-box-content {
    height: 35px;
    padding: 0px;
    margin: 0px;
    width: auto;
} 
.img {
    display: inline-block; 
    padding: 0px; 
    float: left;
    height: 30px;
    width: 30px;
    margin: 0px;
    text-align: left;
}
.user-name {
    float: right; 
    text-align: right; 
    display: inline-block; 
    padding: 0px;
    margin: 0px; 
    font-size: 12px; 
}
</style>
</head>
<body>
<div class="topbar">
<div class="topbar-content">
Contenuto di sinistra 
<div class="right-topbar"> 
<a href="/search"><img class="search" src="search.png"/></a> 
<div class="menu-box">
<div class="menu-box-content">
<img class="img" src="img.png"/>
<p class="user-name">Nome Cognome</p>
</div>
</div>
</div> 
</div>
</div>
</body>
</html>

P.S. questo succede solo con ie! infatti con chrome tutto è ok

Grazie in anticipo

**karl94** · 16-07-2012, 00.33.59

Anzitutto inserisci la dichiarazione di DOCTYPE, altrimenti gli standard possono non venire rispettati.

16-07-2012, 15.27.59

Si ho inserito <!doctype html> e la cosa si è risolta... ma molti altri valori come padding e margin vengono alterati e tutta la pagina diventa un disastro :( è normale come risolvo?

**karl94** · 16-07-2012, 17.02.16

Puoi caricare la pagina con le ultima modifiche sul tuo spazio web e indicare qui l'indirizzo, così da poter verificare direttamente?

17-07-2012, 18.45.43

No ho risolto... grazie lo stesso! si dovevano solo modificare un po i valori di padding e margin

Discussione: Problemi con il float :|

LinkBack

Strumenti discussione

Display

Problemi con il float :|

Regole di scrittura