Which formula gives you the desired effect?

Desired Results

A B C D

Click on the letter of the correct answer.

A is incorrect. The sidebar and main have the width’s switched and the floats switched. Main carries the larger width.

B is Correct! Nice Job!

C is Incorrect. The widths are equal and the picture does not show equal column lengths.

D is Incorrect. The width of the container is 930px. When you add the content area, margins, and padding of both main and sidebar, they equal 945px.

Container has a width of 930px.

Create a sidebar and main

A B C D

Click on the letter for the next step.Create the following styles for the #sidebar id selector.• Set the width to 150px• Add padding of 10px to all sides• Have the text appear in white• Set the background color to teal• Set the value of the float property to right

Create the following styles for the #main id selector• Set the width to 700px• Set the margin on the right to 10px• Add padding of 10px to all sides• Set the background color to teal• Set the value of the float property to left• Set the text indent to 2em

Did you check your answers? Did you do it correctly? Click to view the finished product.

Does yours look the same?

In this assignment, you are to create the sidebar and main id selectors. Open biz.html in notepad and when given instructions type the code in the file.The sidebar goes on the right side and contains the logo. When you click the letter it will give you directions for the next step and the answer to the previous step. Do your best. You should correct your mistakes.

Create your own sidebar and main

A B C

Click on the letter for the next step.

Make sure to set your width. Do you need margins or padding and on which sides?

Here is what your finished product should look like. Go ahead and write your code and then come back and click on C.

This is an example of what your code could look like. Is yours wrong if It is a little different? No. Just make sure your columns are not bigger than 940 px.

In this assignment, you are to take the website below and change it to a two-column layout. Open griff.html in notepad, when given instructions type the code in the file. The width of the container is 940px.