Side By Side Divs

Download this project with source code samples

Objectives

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

• Apply the CSS box model to position and size XHTML elements

Instructions

Instructions: Use document-level styling to create the following pages.

Practice A

1. Write your class schedule on one line like this:Web Site Design Street Law Investments Intro To Java Programming
2. Place each of your classes in its own div like this:

<div>Web Site Design</div>
<div>Street Law</div>
<div>Investments</div>
<div>Intro To Java Programming</div>

1. Give each div a green border that is 2 pixels wide.
2. There should be 15 pixels between the text and the green border.
3. There should be 50 pixels between each class.
4. Name your file side_a.html.

Practice B

1. Create a row of colored divs. Each one should be 50 pixels high.
2. A red div that is 50 pixels wide should be on the very left.
3. On the right side of the red div, there should be a blue div that is 200 pixels wide.
4. On the right side of the blue div, there should be a green div that is 300 pixels wide.
5. Name your file side_b.html.

Practice C

1. Download your school’s logo from its website.
2. Put the logo 100 pixels down and 50 pixels from the left of the window.
3. Place your school’s name 100 pixels to the right of the image.
4. Under both of these, make a red div that is 30 pixels high and 100% wide. Hint: Use clear:both; to place this div on a new line.
5. Name your file side_c.html.

Screenshot

More screenshots and source code for this project are available when you purchase the curriculum.

Rubric

Download this project with source code samples