Other Pages

Make Columns

Goals

    These challenges will have you diving into the CSS side of things. Open up that layout.css file and take a look.

  • Give your main content a border

  • Make two columns and line them up side by side

Steps

Step 1

CHALLENGE: Find the div with the id 'main' in your HTML. See if you can give it a one-pixel border on its left hand side by modifying the existing stylesheet, 'layout.css'.

If you get hung up on what CSS property to use, see if you can look it up on dochub.

Step 2

CHALLENGE: If you styled the #main div in the previous step by using a style rule like #main { property: value; }, see if you can come up with a second rule that could also apply the same style, but use a different selector.

Hint: You can select an element that's inside of another element by listing one selector after another. The selector .content div {} would apply to any divs inside of an element with class content

Step 3

CHALLENGE: See if you can turn the page into a two-column layout. Make the 'nav' div the left column, and the 'main' div the right column.

Two hints: it may be helpful to give these divs a fixed width, and you may need the float property.

Explanation

More CSS!

It takes a long time to master CSS, but there are lots of great-looking resources out there to help. One cool resource is the CSS Zen Garden, a site with dozens of examples of the same HTML page styled with different user-submitted stylesheets. It's a great place to get a sense of how limitless the possibilities are with CSS.

CSS Reference Sites

Deploying

Before the next step, you could try deploying your page to Github!

Next Step: