Lesson 1: Page Layout with CSS

Overview

In this module, you will learn to use CSS to control the layout of content on your web page. With CSS, we have total control of where items are positioned the page, although it can sometimes be challenging figuring out exactly how to attain that. In the current lesson, we will explore basic techniques for controlling the position of page content using CSS.

Learner Outcomes

At the completion of this exercise:

you will be able to demonstrate a basic understanding of CSS positioning principles.
you will be able to identify whether a web page uses fixed or liquid layout
you will be able to apply CSS positioning to align elements into two columns on your web page.
you will be able to position elements using both relative and absolute positioning

Activities

Part 1: Overall Page Layout

Read the page Page Layout: Overall Design Strategies.
Open your portfolio's external style sheet in a text editor, and your portfolio home page in a browser.
Apply a fixed width design to your site by adding the following property to your CSS declaration for the body tag:
width: 1000px;
Save your CSS file, refresh the browser, and try resizing your browser window to see what effect this CSS has. Experiment by changing the width. Trying using smaller values and larger values.
Now changed your fixed width design to a fluid design by changing the width to a percentage. Try various percentage values until you find one that works well for your design.
A fluid design will probably work well for your portfolio, but later in this course (in Unit 4) you'll be adding a banner image to your site, so you need to do something to accommodate that image. The image will be 720 pixels wide, so add the following property beneath the width property in your CSS:
min-width: 720px;
Now your body content will flow to match users' screen resolution, but it's guaranteed to be at least wide enough to hold your banner image.
If you'd like your page to be centered horizontally, add the following property beneath the other properties you just added:
margin: 0 auto;

Part 2: Positioning Other Elements

Read the article CSS Positioning 101 from A List Apart. Be sure to click on and look at the examples.
Record your answers to the following questions, and share them with your instructor:
- What are the five possible values of the CSS position property?
- If you don't specify a position property for an element in your CSS, what is its default value? Where will it be positioned on the page?
- Consider this element:
```
  div#omnibox {
    position: fixed;
    top: 5px;
    right: 5px;
  }
```
  Where will this element be positioned on the screen?
Open your portfolio's external style sheet in a text editor, and your portfolio home page in a browser.
Let's start with the "skip to main content" link. It's positioned at the top of the document, but since we added a left margin to the style sheet in the lesson on Applying the Box Model in CSS, that link is no longer positioned in the extreme upper left corner of the page. Users with low vision using screen magnification software would benefit from having it positioned there. Otherwise they might not see it. To return that link to the top left corner, add this CSS to your style sheet:
```
  div#skipnav {
    top: 5px;
    left: 5px;
  }
```
Save your style sheet, and refresh your home page in the browser. Did this have the result you expected? If you expected top:5px and left:5px to position the #skipnav div in the top left corner of the screen, that would be a reasonable expectation. That won't work though because the default position property for all elements, including this one, is static, and when elements have position:static we have no control over their top, bottom, left, or right coordinates on the page.
Let's try a different approach. Keep the style definition you used in the previous step, but now add this property:
position: absolute;
Save and refresh. Did that have the result you expected? If everything worked, you should have seen the #skipnav div move to the top left corner which was the intent, but by using position:absolute we completely removed the #skipnav div from the flow of the document. This means it no longer occupies space that was otherwise keeping the content that follows it down a bit on the screen. Consequently, the rest of the page moved up to fill in the vacancy. This may or may not be a desirable result. If it's not desirable, there's another way:
Try replacing the #skipnav style definition with this:
```
  div#skipnav {
    position: relative;
    right: 12.5%;
  }
```
Save and refresh. Is that a better result? By using position:relative, the #skipnav element remains in the flow of the document, so all the content that follows has returned to its original position. However, now the top, bottom, left, and right properties can be used to position it relative to its default position. So, right:12.5% pushes it 12.5% from the right (which pushes it toward the left). Confused? That's ok - even professional web developers with many years of experience still struggle with all the nuances of CSS positioning.
Continue playing with various strategies for positioning the #skipnav div until you're satisfied with its position.
Now let's try positioning the two .info divs so they're positioned side by side, rather than stacked on top of each other. One technique for positioning elements side-by-side is to use the CSS float property. Elements can be floated to the left or right of content that's adjacent to them. We can float both of the .info div's left. The first one will float left, and the second one will float left right next to the first one. One advantage of using floating content is that it's able to transform itself to best fit the users's display. if a user's browser window size or screen resolution is too small to hold the two div's side by side, the second one will fall back down to its original position beneath the first one. To float all instances of div.info, simply add float:left to your existing CSS code for div.info. Your code might look something like this:
```
  div.info {
    width: 40%;
    font-size: 1.2em;
    float: left;
  }
```
Note: You should already have created a style definition for div.info. If you did, don't create a new one - simply add float:left to the existing definition.
One final step is necessary before this is complete. Since the code we just added is making the .info divs float to the left of the content that follows them, that means the nav element will drift up to fill the gap to the right of the second .info div. We don't want this, so we also have to add the following style definition:
```
  nav {
    clear: left;
  }
```
The clear property clears floats. The value can be left, right, or both, indicating which floats you want to clear. In this case, the .info divs were floated left, so we want to clear these left floats so they don't affect the #navigation div.

Handouts/Online documents

CSS Positioning 101 from A List Apart.

All done?

Show your instructor your results before starting the next lesson.