CSS fill remaining width of a screen

Well, I'm finding that using <DIV> with CSS for layout purposes is far more complex then using <TABLE>

How do I make an element, such as <SPAN>, fill the remaining width of a screen using CSS?

For example, let's say I have an images and a single line of text enclosed by <DIV>, I want to place a <SPAN> on the right of the the text (also within the DIV) and have it stretch to the right side of the screen.

Is this possible? It would be simple using tables.

you could use

width: 100%;
text-align: left;

That may work. I haven't tested it, should work with IE but the rest ???

Unfortunately the width attribute is calculated on the width of your screen. So if your browser window is 800 pixels wide then "width" will return 800. If you put this element beside something like I want to it will either wrap to the next line or increase the width of your page beyond the width of the window.

i had the very same problem.

my solution was to create the spav at 100% width - 0px from the top and the left and then use the margin attribute (or it might have been clipping) to force the text over to the right. Then i put my lefthand vertical div over the top of the main span.

It's a lame way of doing it but it worked for me.

Of course what you really want is some kind of alternative size system similar to * in framesets but i don't see this being implemented until the next release of CSS

Icy

remember you can't normaly set width to a span. its for inline style-
though browsers like ie let you set width to it, others like mozilla will not,

you could use display:block in the span and then set a width.
but then again you could just as well have used a div tag.

The problem with setting the width is that I don't know how wide the screen is and the content on the left may change width from browser to browser.

icy_polecat looks to have the best option.

It's surprising that something this trivial wasn't implemented into the current version of CSS.

i'm not completely
getting your problem
so if you phrase it a bit better, i might be albe to help,

why do you want the span to fill the whole width? just to have another background color, or?

I've attached a picture which shows how I'm using it.

You will see that between the pale green and the dark green area's there is a black line (border-bottom). But the line stops after the "PELM Enquiries" link. I need it to continue to all the way across.

The pale green area is dfined by a DIV which enloses a series of SPAN tags and the links that have Border-Bottom set. The dark green is defined by another DIV. I've done it this way as I don't want a border below the link for the current page, in this case "About PELM".

I was hoping I could simply put in a SPAN after PELM Enquiries to fill this gap with a black line.

Perhaps there is an easier way to do this?

My attachment doesn't appear to have attached. I'll try again.