Dziwne zachowanie diva w zależności od zawartości Opcje

[Dominator]

Witam,
spotkałem się dziś z dziwnym zachowaniem diva - polega ono na tym, że jeśli jest w nim dużo tekstu to jest OK, ale jak jest mało to sobie wędruje w prawo...

Jak to rozwiązać?

http://scr.hu/0f9/xxc27

Gdy zamiast lorem ipsum napisałbym jeszcze z 5-6 wyrazów to zachowałby się normalnie.

[Dominator]

[PHP] pobierz, plaintext 
<div id="messageContainer">
                    <div class="imageBox"><div id="img"></div></div>
                    <div id="boxText">
                        wiadomosc1
                    </div>
                </div>
 
[PHP] pobierz, plaintext 

[PHP] pobierz, plaintext 
#img
{
    margin-top: 0%;
    border-radius: 25px;
    margin-left: 10%;
    margin-bottom: 2%;
    background-image:url(../img/avatar.png);
    width: 48px;
    height: 48px;
    background-repeat: no-repeat;
    background-size:auto;
    float: left;
}
 
.imageBox
{
 
    margin-bottom: 5%;
    margin-top: 2%%;
    margin-left: -10%;
}
 
#messageContainer
{
    /*
    border-bottom: 2px solid #1976D2; 
    */
 
}
 
#boxText
{ 
    margin-top: -3%;
    margin-bottom: 2%;
    width: auto;
    background-color: #E3F2FD;
    height: auto;
    padding: 1.5%;
    margin-left: 8.5%;
    margin-right: 5%;
 
    overflow:hidden;
 
    position: relative;
 
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
 
}
[PHP] pobierz, plaintext 

Ktoś pomoże?

[RysQ]

W działaniu tego kodu nie widzę opisanego przez Ciebie problemu - z dostarczonego obrazka. Być może masz jeszcze jakieś inne reguły, które wpływają na te elementy i/+ dodatkowe tagi html?

Natomiast mam kilka uwag:

[HTML] pobierz, plaintext 
<div id="messageContainer"> <- 1. Jeżeli to jest element powtarzalny zmień id na class
                    <div class="imageBox"><div id="img"></div></div> <- 2. po co Ci tutaj dodatkowy div#img ? Dodatkowo patrz punkt 1.
                    <div id="boxText"> <- 3. Jeśli masz tutaj tyko treść wiadomości semantycznie <p></p> będzie lepsze. Patrz 1.
                        wiadomosc1
                    </div>
                </div>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
#img
{
    margin-top: 0%; /* po co to? */
    border-radius: 25px;
    margin-left: 10%;
    margin-bottom: 2%;
    background-image:url(../img/avatar.png);
    width: 48px;
    height: 48px;
    background-repeat: no-repeat;
    background-size:auto;  /* a to? */
    float: left;
}
 
.imageBox
{
    
    margin-bottom: 5%;
    margin-top: 2%%; /* 1 % wystarczy */
    margin-left: -10%;
}
 
#messageContainer
{
    /*
    border-bottom: 2px solid #1976D2; 
    */
    
}
 
#boxText
{ 
    margin-top: -3%;
    margin-bottom: 2%;
    width: auto; /* po co */
    background-color: #E3F2FD;
    height: auto;  /* po co */
    padding: 1.5%;
    margin-left: 8.5%;
    margin-right: 5%;
    
    overflow:hidden; /* jeżeli nie masz szerokości i wysokości określonej w jakichś jednostkach ten parametr nic nie wnosi */
 
    position: relative;
    
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    
/*No chyba, że gdzieś wcześniej masz jakieś reguły CSS, po czym musisz elementom przypisywać domyślne wartości.*/
 
}
[CSS] pobierz, plaintext 

Ten post edytował RysQ 13.06.2015, 11:52:42