Can't align image? - html

Question

I feel like this is a stupid question, but I honestly cannot figure this out. I can't align an image to the text.
kissoff.weebly.com/account-page.html
The box in the center that has
"ID:78490
Bank:" etc.
should have the image to the right of it. The problem is the image keeps putting itself in the last header on the page and aligning to that instead (it's a picture of a cat with a green border).
Main CSS used for this page:
/*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!*/
Possible CSS issues (the main text containers):
#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;
}
Thanks for looking, I appreciate it.

Answer 1

First add position:relative to the .stat-container class (the container of the img)
then add this css to your .img.stat-img class
.img.stat-img
{
position: absolute;
right: 0;
top: 0;
}
If you want the img to the far right of the box then add position:relative to the id="stats" div instead, and in your .img.stat-img class use
.img.stat-img
{
position: absolute;
right: 40px;
top: 25px;
}

Answer 2

Here is the corrected HTML and css sturcture. Please follow the following css and 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 changes
You need to put cat image outside the div id="stats" not inside it.
Hope it will work for you.