CSS width issues:

The way I have my page set up, I have one div centered on the page taking up like 70% of t开发者_如何学Gohe page (width: 70%), and in that div, I have a banner with text (in a p element) and a table. This banner is supposed to be the same width as the table, and when I set the width, I had the banner and table set up with their width at 100% (of the container div). When I shrink the browser horizontally, the table stays the same size, but the banner shrinks to the left, looking really ugly. And if I smoosh the browser so it's thinner than the biggest word in the text, the text goes right off the banner! How the duck to I fix something like this? (Note: The last sentence referred to a tasty aquatic bird, not profanity. It is not a typo.)

For the table issue give the width in percentage

 <table width="100%">

Give word property , so that the text will break when you shirk.

 word-wrap: break-word;

Works fine here (FireFox):

http://jsfiddle.net/W9e2A/1/

The table will shrink to the size of its contents at which point it will stop shrinking. That will cause the banner to continue to shrink, and it will make the table look ugly (text will flow out).

If you set the min-width of your containing div to the smallest width of the table, it should fix your issue.

As a side-note, if you are using a table for something other than tablature data (e.g. layout), you should consider using div's/span's instead.