CSS Expanding Border with Text Resize

[melc26]

Hi guys,

I'm new here, I was hoping you good people good help me out with a problem I have for my site.

You can have a look at this URL:

http://www.missmonkee.com/problem/mel.htm

I need the yellow div (that has the dotted border-bottom) to expand to the left alongside the text (menu items) such as newsletter signup etc etc.
The dotted line needs to sit flush with the end of that menu item.

I need this to be accessible and for the text to expand as far as poss without breaking and also to not break once resized down to 800x600.

Firstly is this possible? I'm not sure it is. If it is... can anyone help?
Please Please pretty please?

Thanks Mel

[ronaldb66]

Please clarify

... to expand to the left alongside the text...

I've been reading your question about a dozen times over and I still can't figure what you mean exactly; could you humor me -and possibly some others- and elaborate on your question some more?

On the surface, a possible approach seems to be to specify an em width for the div containing the menu so in theory it scales with the text size (if you use relative units, anyway), but you might run into trouble with lower resolutions. I guess you'll have to do some experimenting.

A note to the side: the markup looks a rather div and class heavy, and there's a lot of stylesheet for so little content... Also, I noticed quite a bit of floating going on.
I have to admit I was too lazy to work my way through three separate style sheets in detail, but you may want to look into grouping elements into containers a bit more and leave elements in the normal flow as much as possible; it may simplify your styles and reduce maintenance efforts.