How to Put a Div Inside a Div

To customize the appearance and organization of your site you can wrap a division inside another.

In the design and programming of a website, you may find that a division, or DIV, is not displaying properly or needs its contents organized. One method to fix some alignment problems and organize the contents of your division is to create a nested DIV. A nested DIV is a division placed inside another. It allows programmers to develop sites without using tables or other older means of formatting and positioning.

Instructions

1. Click to place the cursor directly before the beginning of your inner DIV.

2. Type "<Div id = "yourdivname" width = "##" height = "##">" without the outer quotations. Replace "yourdivname" with your chosen name for the division and replace "##" with the number of pixels wide or high you want the DIV.

3. Click to place the cursor directly after the end of your inner DIV.

4. Type "</Div>" without the quotation marks to close the outer division.

Tips & Warnings

• To create the outer division at a specific location, after the height number in your code, type "Style = "position: absolute; left: ## px; top: ## px;"" without the outer quotation marks. Replace the "##' with the number of pixels away from the top and left of the page you want the top left corner of the division to appear.