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

Get Adobe Flash player


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.


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: