Blogger Tips and Design Portfolio from Lightway Web Services, Inc.
HomeBlogger TipsDesign TipsWeb HostingDomain Name RegistrationDesign PortfolioAbout This BlogContact

Wednesday, March 21, 2012

Using the "Float" Command in CSS

Often times within a paragraph of text, a picture needs to be added.  In order to align the picture to the right or the left of the text, you could use the HTML command, <DIV ALIGN="right"> tag or "left" to get the image in the right place.  This will properly place the image on the right or left, but it will leave no margin between the image and the text.  The text to the right or left would be smashed up right next to it.  The CSS "float" command provides a comfortable alternative.

To align an image to the left using "float", this code would need to be added within the IMG tag like this:

style="float:left; margin-right:10px"

The "float" command tells the image to place to the left of the text, and the margin provides a buffer so that the text does not touch the image on the right hand side.  Margins can also be added to the other sides as needed. Of course, to place the image on the other side of the text with the same buffer, the code would look like this:

style="float:right; margin-left:10px"

The right and left commands our swapped in this example to place the image on the right with a buffer on the left.  Within this code, you can also create image borders, image padding, and colored backgrounds using proper CSS commands within the STYLE attribute.
Posted by Brian Kraft at 3:15 PM
Labels: BlogTips, DesignTips

No comments:

Post a Comment

Newer Post Older Post Home
Subscribe to: Post Comments (Atom)

Popular Posts

  • Custom Navigation Tabs for Blogger Menu
  • Using the "Float" Command in CSS
  • Adding the Facebook Social Plugin
  • Adjusting Blog Widths
  • Using a Custom Domain or Subdomain for Blogger address
  • Creating the Blog Header
  • Ever Care Pool and Spa
  • Creating a Favicon
  • Oxnard Lemon Company
  • Coastal California Blueberry Farms, LLC.

Facebook

Followers

Subscribe To Blog

Posts
Atom
Posts
Comments
Atom
Comments