Ok...I guess all the css in my site is decent. The only problem that I am faced with are a couple of tables. The tables work fine but of course they go against the whole "css purist" thing. Here is the prob...
I have a container (<div class="oddpic">) and inside that container I have an image which I want on the left and the text on the right. Now...before you say..."just set the image as a float"...it doesn't work. When you set an image to float inside a container, the container does not size itself according to the image anymore but just the text on the right. So you result in the image overlapping the container's boundaries. Not a good thing. Right now I have a table inside of the container with two cells. This is the only solution I've found to the problem so far, but there might be an answer somewhere. The code is posted below and the site is here: http://mark.axsysdesign.com/art/graphite.shtml
If you have any solutions then let me know. Thanks
<h2>Desktop Wallpaper</h2> <p>These files have been compressed with Winzip in order to trim download time. If you do not have Winzip then click <a href="http://download.com.com/3405-20-960683.html">here</a>.<p> <div class="oddpic"> <table> <tr> <td> <img src="/digart/desktop/floral.jpg" alt="" /> </td> <td> <h2>Floral</h2> <p><i>select a file size below...</i></p> <div class="digart"> <ul> <li><a href="/digart/desktop/floral_1600x1200.zip">1600 x 1200</a></li> <li><a href="/digart/desktop/floral_1280x1024.zip">1280 x 1024</a></li> <li><a href="/digart/desktop/floral_1024x768.zip">1024 x 768</a></li> </ul> </div> </td> </tr> </table> </div>
This article should help: http://www.complexspiral.com/publications/containing-floats/