Question

Go to the Customer Comment Styles section.

In this section, you will create style rules for the customer comments displayed near the bottom of the page. For the ulelement with the id comments, create a style rule that sets the width to 75% and centers the element by setting the top/bottom margin to 40 pixels and the left/right margin to auto.

Karen wants the list items to appear in two columns on the page. In the same section, create a style rule for every list item in the comments list that:

-displays the item as a block with a width of 50% floated on the left and

-sets the size of the bottom margin to 30 pixels.

Every customer comment is accompanied by an image of the student. Karen wants these images displayed to the left of the comment. Create a style rule to display the image within each comment list item as a block with a width of 20%, floated on the left, and with a left/right margin of 5%.

Create a style rule for every paragraph nested within a customer list item that floats the paragraph on the left margin with a width of 70%.

Answer 1

CODE:

<style>

ul#comments
{
width: 75%;
margin: 40px auto 40px auto;
}

ul#comments li
{
width: 50%;
float: left;
display: block;
margin-bottom: 30px;
}

ul#comments li img
{
display: block;
width: 20%;
float: left;
margin-left: 5%;
margin-right: 5%;
}

li p
{
float: left;
width: 70%;
}

</style>

Without CSS output looks like: