[plum] a little CSS-P help needed

Hi y’all—hope your weekend was good,

I’ve made substantial progress with the new layout for my first Plum project, all done in CSS.

But I’ve got a problem condition that I cannot seem to find the correct solution for. If anyone can help—please and thank you.

Here’s what I’ve got—need to do:

I have a “PageBar” that spans the template with a background image (the designer wants a “scoop” at the end, right side, of the bar.)

-no problem here, in correctly rendering the PageBar image

my CSS

#PageBar {

height: 20px;

position: relative;

background: url(../../../images/page_bar.gif) no-repeat top left;

}

.PageTitle {

position: absolute;

left: 10px;

width: 100%;

height: 100%;

}

.CatName {

postion: relative;

float: right;

width: 100%;

height: 100%;

}

Now, the problem area:

I need to place—at the left side, on top of this background image—a text variable #PageTitle#

And then—at the right side, inline, also on top of this background image—another text variable #CategoryName#

Currently—at this moment—my markup looks like this:

<div class="PageTitle">#PageBar.PageTitle#

<p class="CatName">#PageBar.CategoryName#</p>

</div>

PageTitle will correctly show at the left, but CategoryName wraps to the line below—and I need it in the same line as PageTitle but to the right.

I’ve tried a dozen variations on the theme, and I “thought” I understood the CSS box-model, but I can’t get it to work.

Can anyone help me here?

Thanks,

Dan Kaufman

An Elephant Never Forgets

Reply via email to