Align vs Float for images (5 posts)

  1. IslandOwl
    Posted 4 years ago #

    This is more a request for explanation than a problem. I am trying to understand what the difference is between these two types of CSS entries for an image and why (or if) one is better than the other. I have recently moved my blog over to self-hosted WordPress from Typepad and am now uploading all of the photos I used in my posts.

    Basically, Typepad uses and WordPress does not and Typepad uses style="float:right;" whereas WordPress uses class="alignright . There are a couple of other small differences in that Typepad always puts in margins such as style="margin: 0px 0px 5px 5px;" which I usually adjust and in WordPress I have to put in that CSS manually. Typepad also only says the H-px x W-px if I resize the image whereas WordPress always has the dimensions.

    Example: (added some "" at beginning & end so this would show instead of link)
    Typepad uses:
    ⁢"<" a href="http://locationaddress"><img class="asset asset-image at-xid-locationaddress " style="margin: 0px 0px 5px 15px;" title="Path51" src="http://locationaddress" border="0" />"">
    WordPress uses
    * <img src="location address" title="path51" width="295" height="442" class="alignright size-full wp-image-646" />

    I did try searching out on the web for the difference between style="float: right;" and class="alignright but did not really find an answer.

    TIA for any enlightenment you can give me.

  2. WPyogi
    Forum Moderator
    Posted 4 years ago #

    The class "alignright" is a predefined class in WP core. It uses float: right -- so it's no different than "float-right" in any other context.

    See this for details: http://codex.wordpress.org/CSS

    As you can see, there are a number of other predefined classes that affect image appearance and alignment and margins...

  3. IslandOwl
    Posted 4 years ago #

    I actually had already read that but since I am self-taught in regards to all coding, I am unclear on the basic of basics: I totally get that they both align an image on the right but I don't understand what the difference is between a "class" and a "style" or what the term "predefined class" means in the codex.

  4. WPyogi
    Forum Moderator
    Posted 4 years ago #

    Basically, .alignright IS a class that WP has already created - -so that it is readily available and consistent in all themes (assuming they use the predefined classes).

    A "style" is how CSS works -- CSS uses styles to determine the appearance of html elements. So styles are anything from color, size, alignment, position, font, borders, margins, spacing, etc.

    This may be helpful: CSS reference

  5. IslandOwl
    Posted 4 years ago #

    Thank you! That helps a lot!

Topic Closed

This topic has been closed to new replies.

About this Topic