How to Nest Position Div Tags
DIV tags are HTML tags that create a DIV container. DIV containers can be used to position or style text, images and other DIV containers, and are typically used to create the basic layout of a website. DIV containers can be positioned using the CSS "position" property, along with information indicating the relative or absolute position your require. You can also put a DIV container within another container, which is called "nesting." By combining the position properties of nested DIV containers, you can create unique layout effects that would be difficult to replicate using HTML tables or "<SPAN>" tags.
Other People Are Reading
Instructions
-
-
1
Open your Web page document in an HTML or text editor. To open the document using the native Windows text editor, right-click the file, then click "Open With." Click to select "Notepad" from the application list, then click "OK."
-
2
Click to place your cursor on a line in the document, between the "<BODY>" and "</BODY>" tags, where you want to create the nested DIV containers.
-
-
3
Type "<div style="position:absolute; top:[x]px; left:[y]px;'>" to create the outer DIV container with the "position" property set to "absolute." The "absolute" value means that the DIV is positioned on the screen without relation to any other containers. The position of an "absolute" page element is defined only in relation to the Web browser display area. Replace the "[x]" text with the number of pixels from the top of the screen that you want to position the DIV. Replace the "[y]" text with the number of pixels you want to position the DIV from the left side of the screen.
-
4
Type "<div style="position:relative; top:[x]px; left:[y]px;'>" to create a nested inner DIV container with a relative position. The "relative" position value makes the DIV container display in a position that is relative to its containing page elements. In this case the containing page element is the DIV container created in the previous step. Replace the "[x]" text with the distance in pixels you want to display the inner DIV container from the top of the outer DIV container. Replace "[y]" with the distance in pixels that you want to position the inner DIV container from the left edge of the outer DIV container.
-
5
Type or paste any content that you want to display in the inner DIV container.
-
6
Type "</div>" to close the inner DIV container with the relative positioning.
-
7
Type "</div>" to close the outer DIV container with the absolute positioning.
-
8
Click the "File" menu, then click "Save" to save the Web page document.
-
1
Tips & Warnings
You can change the "position" values of the outer and inner DIV containers created above to create an outer DIV container with relative positioning and an inner DIV container with absolute positioning. You can also create nested DIV container that both have absolute or relative positioning.
