Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Summary:

Container div using CSS

    ●  Containers are like big boxes that hold everything.

    ●  Every web page needs some sort of container.


Learn About:

CSS Code Body Tags HTML tags

  •   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 - if not, go back and start from the beginning …


Open the CSS Styles panel (if necessary) by going to: Window > CSS Styles and click on

… 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 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

 

 

margin: auto centers the div …

 

margin: auto makes it equal distance on each side …

 

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 …

… and click Add Property to the container.


Step #8: min-height ~

Click the arrow and select min-height

… make the min-height 100 %


Step #9: container Color ~

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

… click Background …

… and paste the number of color into the Background-color of your container.

paste the number


Step #10: Insert the container Div in your index.html Page ~

Open your index page for this project …

… click inside the page somewhere in the Design area …

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


Step #11: Insert a Div on your Page ~

Then go to: Insert > Layout Objects > Div tag


Step #12: Attach the #container Div ~

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


Step #13: Now You See This ~

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

content for class

Hit F12 or select small to view your work.

preview


Last Step: Save and Attach ~

Make sure your new styles.css document IN THE ROOT FOLDER OF YOUR NEW PROJECT, attach it and continue working …

new styles sheet


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