Banjoman

I was doing some further reading about "Responsive Web Design" today and came across an article that details ways of dealing with image layout using CSS3 media queries and doing conditional layout depending on the actual screen width. A List Apart: Responsive Web Design

That definitely works. The idea I'm having trouble with is say I have 10 images for display. One of them needs to be 45%, another 50%, another 10%, etc. Do I now make classes in the CSS for .imgright45 {width=45%; ...} .imgright50 {width=50%; ...} .imgright10 {width=10%; ...} Or is there a better way?

I'm converting an old site from html 4.01 to html5 (mainly just to learn what's new) and trying to avoid sizing anything in pixels. When I run my html thru the W3C validator, I get errors like this: Bad value 45% for attribute width on element img: Expected a digit but saw % instead. for a line that looks like: <img class="imgright" alt="whatever" src="img/someimage.jpg" width="45%" /> The CSS for "imgright" is: .imgright { border: 5px ridge; background: #655A46; padding: 2px; margin-left: 2%; float: right; } From what I'm reading around the net, its acceptable to size things in pixels (e.g., width="250") in the HTML but using the % is not acceptable. The HTML works fine with the % in all the browsers I've tried, but I prefer to do things right. So what is the correct solution? Make a new class (or ID) in css for each size of image I might need?