Grow your CSS skills. Land your dream job.

Floated div tag with an Image and Caption

  • # June 9, 2009 at 1:52 pm

    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!

    # June 9, 2009 at 5:28 pm

    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."

    # June 9, 2009 at 8:52 pm

    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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".