Не удается выровнять изображение?

Question

Я чувствую, что это глупый вопрос, но я честно не понимаю этого. Я не могу выровнять изображение с текстом. kissoff.weebly.com/account-page.html

Коробка в центре, который имеет «ID: 78490 Bank:» и т.д. должны иметь изображение справа от него. Проблема заключается в том, что изображение помещается в последний заголовок страницы и выравнивается с ним (это изображение кошки с зеленой рамкой).

Главная CSS используется для этой страницы:

/*ACCOUNT PAGE!*/ 
#content-container { 
    padding-left: 300px; 
    padding-top: 70px; 
    height: 200px; 
    width: 500px; 
} 

#stats { 
    background-color: #FCFCFC; 
    width: 500px; 
    margin-top: 20px; 
    margin-left: 100px; 
    border: 1px solid rgba(125,180,18,0.8); 
    border-radius: 5px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-top: 18px solid rgba(125,180,18,0.8); 
} 

img.stat-img { 
    margin-top: -45px; 
    margin-left: 370px; 
    height: 100px; 
    width: 100px; 
    border: 1px solid rgba(125,180,18,0.8); 
} 

#box-container { 
    width: 200px; 
} 

.box { 
    background-color: #FCFCFC; 
    margin-top: 100px; 
    margin-left: 1px; 
    padding: 5px; 
    float: left; 
    width: 180px; 
    line-height: 5px; 
    border: 1px solid rgba(125,180,18,0.8); 
    border-radius: 5px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-top: 18px solid rgba(125,180,18,0.8); 
} 

.box2 { 
    background-color: #FCFCFC; 
    margin-top: 20px; 
    margin-left: 1px; 
    padding: 5px; 
    color: #C2BAAF; 
    float: left; 
    width: 180px; 
    line-height: 5px; 
    border: 1px solid rgba(125,180,18,0.8); 
    border-radius: 5px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-top: 18px solid rgba(125,180,18,0.8); 
} 

.last-box { 
    background-color: #FCFCFC; 
    margin-top: 20px; 
    margin-left: 1px; 
    margin-bottom: 50px; 
    padding: 5px; 
    color: #C2BAAF; 
    float: left; 
    width: 180px; 
    line-height: 5px; 
    border: 1px solid rgba(125,180,18,0.8); 
    border-radius: 5px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-top: 18px solid rgba(125,180,18,0.8); 
} 

.box-title { 
    margin-top: -15px; 
    z-index: 900; 
    color: #FFF; 
} 

.box a:link { 
    font-size: 13px; 
    color: #000; 
    text-decoration: none; 
} 

.box a:visited { 
    font-size: 13px; 
    color: #000; 
    text-decoration: none; 
} 

.box a:hover { 
    font-size: 13px; 
    color: #000; 
    text-decoration: underline; 
} 

.box a:active { 
    font-size: 13px; 
    color: #000; 
    text-decoration: underline; 
} 

.box2 a:link { 
    font-size: 13px; 
    color: #000; 
    text-decoration: none; 
} 

.box2 a:visited { 
    font-size: 13px; 
    color: #000; 
    text-decoration: none; 
} 

.box2 a:hover { 
    font-size: 13px; 
    color: #000; 
    text-decoration: underline; 
} 

.box2 a:active { 
    font-size: 13px; 
    color: #000; 
    text-decoration: underline; 
} 

.last-box a:link { 
    font-size: 13px; 
    color: #000; 
    text-decoration: none; 
} 

.last-box a:visited { 
    font-size: 13px; 
    color: #000; 
    text-decoration: none; 
} 

.last-box a:hover { 
    font-size: 13px; 
    color: #000; 
    text-decoration: underline; 
} 

.last-box a:active { 
    font-size: 13px; 
    color: #000; 
    text-decoration: underline; 
} 

/*ACCOUNT PAGE END!*/ 

Возможные проблемы CSS (основные текстовые контейнеры):

#container { 
    margin-left: 30px; 
    padding-left: 210px; 
    padding-top: 70px; 
} 

#text { 
    width: 800px; 
    border: 0 solid #000; 
    -webkit-border-radius: 30px; 
    -moz-border-radius: 30px; 
    border-radius: 30px; 
} 

Спасибо за красивый, я ценю это.

Answer 1

Сначала добавьте position:relative к классу .stat-контейнера (вместилища IMG)

затем добавить CSS в свой .img.stat-IMG класса

.img.stat-img 
{ 
    position: absolute; 
    right: 0; 
    top: 0; 
} 

Если вы хотите IMG к дальней правой коробки затем добавить position:relative к id="stats" DIV вместо этого, и в вашем использовании класса .img.stat-IMG

.img.stat-img 
{ 
    position: absolute; 
    right: 40px; 
    top: 25px; 
} 

Answer 2

Здесь corrected HTML и css sturcture. Пожалуйста, следуйте следующим css и HTML.

CSS Chagnes

#stats { 
    -moz-border-bottom-colors: none; 
    -moz-border-left-colors: none; 
    -moz-border-right-colors: none; 
    -moz-border-top-colors: none; 
    background-color: #FCFCFC; 
    border-color: rgba(125, 180, 18, 0.8); 
    border-image: none; 
    border-radius: 5px 5px 5px 5px; 
    border-right: 1px solid rgba(125, 180, 18, 0.8); 
    border-style: solid; 
    border-width: 18px 1px 1px; 
    /*margin-left: 100px; 
    margin-top: 20px;*/ 
    width: 500px; 
    float:left; 
} 
#content-container { 
    height: auto; 
    margin-left: 30px; 
    /*padding-left: 210px;*/ 
    padding-top: 70px; 
} 
#stat-container { 
    padding:10px; 
} 
} 
img.stat-img { 
    border: 1px solid rgba(125, 180, 18, 0.8); 
    height: 80px; 
    margin-left: 10px; 
    margin-top: 5px; 
    width: 100px; 
} 

HTML изменения

Вы должны поместить изображение кошки вне сНу ид = "Статистика" не внутри него.

Надеюсь, что это сработает для вас.