/    Sign up×
Community /Pin to ProfileBookmark

Help Aligning Image In Div

Copy linkTweet thisAlerts:
Jan 07.2007

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.

[code]
.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>
[/code]

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@Paul_JrJan 07.2007 — If you can define the height of the title section, you can use something like this:
[code=html]
<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>[/code]
What I did here was just remove the [font=courier]DIV[/font] you had around the image. Unless it's implemented somehow in your scripting, it isn't necessary. Just place the [font=courier]img[/font] there by itself.

<i>
</i>.cTitle {
background-color: #313031;
color:white;
[b]height: 30px;[/b]
font-size:14px;
font-weight:bold;
width: 100%;
[b]position: relative;[/b]
}

.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 [font=courier].cTitle DIV[/font]. We accomplish this by setting the [font=courier].cTitle DIV[/font]'s position to relative, so the image is placed in relation to its parent element (the [font=courier].cTitle DIV[/font]), 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.
Copy linkTweet thisAlerts:
@lmf232sauthorJan 08.2007 — 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.
Copy linkTweet thisAlerts:
@Paul_JrJan 08.2007 — You're welcome. ?
×

Success!

Help @lmf232s spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...