Image Placement – Float property


In this lessons, students will learn:

  • How to create nested and side-by-side elements
  • How to use the float property with images and text two different ways

Different ways to use the float property

Image float right


Image float left


Image  and paragraph float left


Files to download


Project – Jenware


At the end of this project, you will be able to:

  • Create a HTML  documents using <div>  and style with an embeded style sheet



Files to Download
Jenware files


  1. Folder called “LastName_FrstName_Jenware
  2. HTML document called “jenware.html”
  3. Directory structure
  4. Embedded Style Sheet


Fonts – Verdana, Geneva, and sans-serif
Background color – #FDF9BD

  1. Create a one column layout in an HTML document.
  2. The width of the #container is 700px.
  3. Place the jenware_logo image inside of the header section
    Create a class for the jenware_logo called “logo”
  4. Place the main heading inside of the header section
    The main heading “Make it Personal” is 1.2em, letter-spacing is .2em, using a margin-top of -10px in size and color #F26521
  5. Place the tagline inside of the header section
    The tagline (“Special occasions…”) font is  Georgia, Times, and serif, with a margin of 1em
    Create a class for the tagline called “tagline”
  6. Create a navigation/menu within the nav section.
    The nav id background color is #751c54.
    The links color is #FFFFFF, and place a margin of 20px.
    The hover state color is #FDF9BD.
  7. Place the content “New Product…12mos” inside the products section.
    The content id background color is #FFFFFF, line-height 1.5em, padding 1em.
    The border color is #FFBC53 and margin 1em
  8. The secondary heading “New Product” is 1.2em in size and color #AC267B
  9.  “Barware and Babyware” is placed in an <h3> element and the size is 1em color #F26521
  10. The <em> element color is #F26521
  11. Place the copyright into the footer sectionThe font is .8em in size and color #663333. HTML code for © ( &copy; )
  12. Description of images:
    jenware_logo.png – Jenware
    glasses.jpg – Photo of glasses decorated with the letter R
    shirts.jpg – Photos of shirts personalized with initial letters
  13. Place files in a folder and name: lastname_firstname_Jenware

This is due at the end of class (Tuesday, October 17, 2017).
Share folder link to Google Classroom > Jenware

Ask assistance if you are not sure about a specific task.

One Column Layout Exercise

One Column Layout Exercise

Font – Arial
Size – 20px

header – dark salmon
content – light blue
footer – coral

  1. Create an HTML document with an Embedded style sheet
    and re-create the one column layout.
  2. Place text within a <p> element.
  3. Save as LastName_FirstName-one-col-layout.html.
  4. Upload the assignment to Google Classroom > One Column Layout.

Due: Thursday, October 12, 2017, at the end of class.