Help Aligning Image In Div

[lmf232s]

I want to add a close button to the div to mimick a forms close button.

Im trying to add the image to the title div but my image just displays at the end of the title text.

Im unsure of how to get the image to align to the right of the div.

One more thing, the div will vary in width. I dont always know how wide the <div> is going to be as it will change based on its content that is displayed in the div.

Any help would be appreciated.

.cBody
{
border-color:#313031;
border-style: solid;
border-width:thin;
overflow:auto;
}

.cTitle
{
background-color: #313031;
overflow:auto;
color:white;
font-size:14px;
font-weight:bold;
width: 100%;
}

.cContent
{
height:100%;
background-image: url(Images/background_10.gif);
padding-left:3px;
padding-right:3px;
padding-bottom:3px;
}

.cClose
{
/* Dont know what to put here. Have tried text-align:right, float: right*/
}

<div class="cBody">
<div class="cTitle">View Results
<div class="cClose"><img src="/images/close.gif"></div>
</div>
<div class="cContent">
'Content Goes Here
</div>
</div>

[Paul Jr]

If you can define the height of the title section, you can use something like this:

<div class="cBody">
<div class="cTitle">View Results <img src="/images/close.gif" width="28" height="30"></div>
<div class="cContent">Content Goes Here</div>
</div>
What I did here was just remove the DIV you had around the image. Unless it's implemented somehow in your scripting, it isn't necessary. Just place the img there by itself.


.cTitle {
background-color: #313031;
color:white;
height: 30px;
font-size:14px;
font-weight:bold;
width: 100%;
position: relative;
}

.cTitle img {
position: absolute;
right: 0;
top: 0;
}
What's going on here is the image is absolutely positioned to the right and top of the .cTitle DIV. We accomplish this by setting the .cTitle DIV's position to relative, so the image is placed in relation to its parent element (the .cTitle DIV), and not the whole page. The height is set to the height of your image, so the image doesn't overlap below the title section.

If that doesn't make any sense, lemme know, lol.

[lmf232s]

Paul,

Thanks for the indepth explination of how and why it works. It all ways nice to have a better understanding of why it is this way or that way.

[Paul Jr]

You're welcome. :)