Annoying little picture -.-'

[Noskiw]

Basically... I'm making a website for my band, and what we are trying to do is to get a picture of the logo onto the main body div. And it isn't working out...

 

 

This is my CSS code... Which is including the "mainbody" div...

 

This is the code for that dynamic page...

 

body{
    font-family: Tahoma, Arial;
    color: #FFF;
    background-color: #000;
}
#header{
    width: auto;
    border: 1px solid #FFF;
    height: 200px;
    padding: 5px;
}
#body{
    width: 1200px;
    border: 1px solid #FFF;
    padding: 5px;
}
#mainbody{
    width: auto;
    height: auto;
    padding: 10px;
    border: 1px solid #FFF;
    text-align: right;
}

#navbar{
    width: auto;
    height: 25px;
    line-height: 22px;
    font-weight: bold;
    background: #000;
    border: 1px solid #FFF;
    border-top: 0px;
    border-bottom: 0px;
}

.button a{
    float: left;
    width: 150px;
    height: 25px;
    color: #FFF;
    text-decoration:none;
    text-align: center;
    border-right: 1px solid #FFF;
}

.button a:hover{
    float: left;
    width: 150px;
    height: 25px;
    color: #fff;
    text-decoration:underline;
    text-align: center;
    background: #7000cf;
    border-right: 1px solid #FFF;
}
#login_box{
    color: #FFF;
    width: 1188px;
    border-right:1px solid #FFF;
    border-left:1px solid #FFF;
    border-bottom: 1px solid #FFF;
    padding:5px;
    text-align:right;
    height: 25px;
}
.button a{
    color: #FFF;
    font-weight: bold;
    text-decoration: none;
}
.button a:hover{
    font-weight: bolder;
    color: #FFF;
    text-decoration: underline;
}

a{
    color: #FFF;
    font-weight: bold;
    text-decoration: none;
}

a:hover{
    color: #FFF;
    font-weight: bolder;
    text-decoration: underline;
}

#footer{
    border: 1px solid #FFF;
    padding: 5px;
    border-top: 0px;
}

.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}

 

<p align="left">Black Rose Dying is a newly formed band founded by Michael-John Derges, Black Rose Dying will be specifying in Metal and some softer genre of music. We haven't recently  produced any music but will post on a few songs as soon as they have been recorded.</p>
<img src="./css/images/black_rose.jpg" align="right" />

 

Any help would be appreciated 

[joePHP]

Hi,

 

If I understand you correctly, you are trying to have the image float to the right of the paragraph? If this is correct, put the image in the p tag and give it an ID. Then set the image with CSS to float to the right.

CSS:

#img_logo
{
float: right;
}

HTML:

<p>
<img id="img_logo" src="./css/images/black_rose.jpg" />
Black Rose Dying is a newly formed band founded by Michael-John Derges, Black Rose Dying will be specifying in Metal and some softer genre of music. We haven't recently  produced any music but will post on a few songs as soon as they have been recorded.
</p>

 

I hope that helps,

Joe

[ignace]

p{float:left;width:600px;}/** total-width-100(+padding+margin+border)=width **/

img{float:right;width:100px;height:100px;}

#mainbox{overflow:hidden;}/** assuming #mainbox is the parent of p+img **/