Floated div tag with an Image and Caption

[for_vt]

Hello,

I created "generic" floated right and floated left div containers with classes that I could use repeatedly on a page. However, since I haven’t declared a size for each div tag I get a warning when I run my CSS sheet through the CSS validator (http://jigsaw.w3.org/css-validator/). I don’t think I want to declare a width because the image sizes are all different.

This is the warning: "In (x)HTML+CSS, floated elements need to have a width declared. Only elements with an intrinsic width (html, img, input, textarea, select, or object) are not affected"

Here is one of the pages I can using the div classes on:
http://johnrichmondlandscapinginc.com/o … vices.html

Here is the CSS:
.PHOTOdivleft {
float: left;
position: relative;
margin-right: 20px;
margin-top: 10px;
top: -6px;
}
.PHOTOdivright {
float: right;
position: relative;
margin-top: 10px;
top: -5px;
padding: 0px;
margin-left: 20px;
}

.captions {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.7em;
line-height: 1.2em;
height: auto;
margin-top: 3px;
color: #666666;
margin-bottom: 2px;
}

I have two questions — is it really a problem to not declare the width AND is there a better way for me to do this? I don’t really think it would be ideal to make an ID tag or class for each and every photo just so the width could be added.

Make sense?

Thanks!

[chris]

As for the width, set it to auto if you do not want to declare one. Some of your other CSS Validation errors are because there isn’t a background color. Try setting a background color …

Code:

background-color: transparent;

this should eliminate several of these warnings that say "Same color…etc."

[for_vt]

Oh! I didn’t even ask about the color warnings — but thanks for the suggestion — I will do it. I am going to set the div tags to auto right now.

Very helpful — much appreciated!

-christina

[Author]

Posts