14 - Container div Tutorial ~
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.
This tutorial is third in a series:
Other People's Work:
Here are examples of work inspired by this tutorial.
Step #1: Make a New CSS Rule ~
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 ~
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