Question

I’d like to have the h2 text within my sidebar uls aligned right and “squeezed” from the left, so that the text appears on seperate lines and fits neatly in the right, fatter part of the background images. I really appreciate your help…

#l_sidebar ul h2,
#r_sidebar ul h2 {
 background: transparent url("images/tag_green01.png") top left no-repeat;
 text-align: right;
 width: 180px;
 height: 50px;
 padding-top: 50px;
}

site: http://www.wespeakfashion.com/

Answer 1

width: 180px;

That’s the width of your H2, so any text that can fit within that space and not have to wrap, won’t. If you want to force wrapping you have to either a) shrink the width of your H2 until it wraps or b) add
tags between each word in your text.

UPDATE:

You have some issues with your HTML. It’s not valid:

<div id="l_sidebar">
    <ul class="l_sidebarwidgeted">
        <h2>Recently Written</h2>
        <ul>

The only allows direct child of a UL is a LI.

Try something like this:

 <div id="l_sidebar">
    <h2>My<br>Title<br>Here</h2>
    <ul>
        <li>etc...

Where h2 would be text-align: right. Then you could give it some padding-right to adjust the text alignment along the right edge of your sidebar.