It took me awhile, but I finally figured this one out. By photoblog has an image in a floating DIV tag on the left of each article. Often I've wanted to have a large link box in the article. I wanted the size of this link box 90% of the remaining space in the article. Very quickly, I ran into all kinds of problems.
First I tried using a single DIV tag.
What's happening here is that the red DIV tag set to 90% isn't paying attention to the floating DIV.
Since these are not the droids we're looking for, I tried a DIV tag that was floating left.
This DIV tag floats to the left and is 50% of the total cell, but it is not centered. You'll also note the line "More random text" comes before the floating DIV tag. The text hasn't been moved in the HTML.
The solution is a bit complicated, but functional. First, a DIV tag is made that has a left margin of 300 pixels to compensate for the floating DIV. Inside this DIV, an other DIV is placed that takes up 100% of the width. This tag will now occupy all the room from the end of the image to the edge of the outer most DIV. A third DIV is added that is set to 90% and centered.
It's pretty easy to see what is happening here with the borders turned on. The red DIV is the first tag with the margin. The yellow DIV tag fills the padded red tag. Because of the padding, this yellow tag is now compensating for the blue image DIV. Inside the yellow tag, the third purple DIV tag is setup to take 90% of the parent tag and is centered.
The only problem left is with Internet Explorer, which won't center the DIV tag. This is corrected with adding a "text-align" to the second DIV (the yellow one).
On browsers other then IE, this last example will be identical to the one above.
Finally, without borders, here is what the result looks like
The end result is this:
A lot of DIV tags needed, but it's fairly simple.