Your description is somewhat hard to follow, but I will make an attempt: Your first problem saying 100% puts the table below the image makes complete sense. If something is width 100% that means it will take up 100% of the width of its parent which in this case will be "example B" div. You haven't even styled that to have a width so it will inherit from its parent which in turn is page01 (none specified) then finally #pager has a width of 75%.
So the problem is you want the table to take up 100% of that 75% but still be next to the image? This isn't possible you will need the width to equal 100% minus image width. You could change how that is handled by having the image in one div that floats left and the table in another that floats right. The issue you would have to dynamicly figure out what % the image width is based off the screen width. (or you could go with a preset width that makes sense say around 960px and then you can manually calculate everything else based off that size)
It seems your second problem is the same as the first as 50%+50% = 100% and fills the whole screen again.
I know you mentioned that the names would change because you knew someone would complain about how broad they are, but honestly naming things appropriately even in the beginning stages are going to help to you visualize what purpose each div serves and it will help us who attempt to assist you in these troubles visualize what is needed.
Last tip i would leave you with is installing firebug it will allow you to click on each element you are trying to style and style it in the browser image until you get your desired result then you can go back to the code and change your stylesheet. This helps in situations where you are having a hard time visualizing the end result of your code.