14 - Container div Tutorial ~

Learn These Tools & Concepts:

Containers are like big boxes that hold everything.

Every web page needs some sort of container.

 

  •   The purpose of container divs is so the content of the browser flexes to fit the size of the screen the page is being viewed upon.

 

  •   If you've been following this series of tutorials, you should now have created a CSS document with body and html tags.

  This tutorial is third in a series:

1 - Body    2 - HTML    3 - Containter  4 - Header    5 - Nav     6 - Content   7 - Footer  

Step #1: Make a New CSS Rule ~

Hopefully you've done this tutorial first …

Add a new CSS rule by clicking on the sign.

This time, add an ID to styles.css

Step #2: Call the Rule container ~

Type container as the name of the id rule …

Press OK when you are done.

Step #3: Define container Rules ~

Select Box

Set width to 80% - for now …

Remember, you don't have to get married to any of this! You can change the settings later.

Step #4: Center the container ~

Set margin to auto

auto centers the div by giving it equal space on each side. Don't ask why, it just does …

Step #5: Auto Height on the container ~

Set height to auto …

Step #6: Position the container ~

Click on Positioning and set Type = Relative

relative is important because all the other rules depend on it for their instructions …

Step #7: Add a New Property ~

Stretch the CSS panel so you can see the properties menu …

Click Add Property to the container

Step #8: min-height ~

Click the arrow and select min-height

Make the min-height 100 %

Step #7: container Color ~

Choose another color from your Kuler Color selection by copying the HEX number from your Swatches.

(You may need to go to: kuler.adobe.com and find your color scheme)

Add it to the background of the #container

Step #8: Insert the container Div in the Page ~

Now, click inside the page somewhere in the Design area …

Go to: Edit > Select All … and select all the content of your page …

Step #9: Insert a Div on your Page ~

Then go to: Insert > Layout Objects > Div tag

Step #10: Attach the #container Div ~

Then attach the container rule you just made to the div.

Step #11: Now You See This ~

The background color of your div should be different than the background of your page.

Hit F12 or select to view your work.

Last Step: Save and Attach ~

Save your styles.css file, attach it and continue working …

---

Other Resources: http://codecamel.com/fullheight