How to Place a Div Dynamically

Dynamically positioned DIVs are automatically aligned based on other elements of the page or browser window.

When designing and publishing a website, a lot of concentration and preparation must go in to organization and layout. With the rise of alternative viewing devices such as mobile phones and tablets, it is more important than ever to place objects on your page dynamically so the site displays correctly across platforms with varying resolutions. Setting your DIVs to position themselves dynamically is a quick and efficient method of establishing a uniform page layout for all viewers.

Instructions

1. Add a DIV to your page by typing "<div>" to begin the division and "</div>" to end it. All content positioned between the beginning and ending tags will be displayed in the DIV.

2. Insert "style = "position: fixed;"" after "div" and before the closing bracket in the beginning DIV tag to dynamically position the division relative to the browser window. Replace "fixed" with "absolute" if you want to position the DIV based on a percentage of the window space.

3. Add "top: #px; left: #px;" after the semicolon of the statement added in Step 2. Replace "#" with the number of pixels away from the top and left of the browser window you want the DIV to appear. "Right" and "bottom" may be used in place of "top" and "left."

4. Replace "px" with the percentage sign (%) to create the DIV across a percentage of the window space. For example, if you want the DIV to begin in the center of the browser window, use "left: 50%." For example: <div style = "position: fixed; top: 50px; right: 30%;"> DIV content goes here </div>

Resources

• W3Schools: HTML Styles
• W3Schools: CSS Position Property