JavaScript is disabled! Please enable JavaScript in your web browser!

Freestyle Academy of Communication Arts & Technology

1299 Bryant Ave, Mt. View, CA 94040 T 650-940-4680   F 650-961-1346
2 Required Classes: English and Design 3rd/Elective Class:  + Animation or Digital Media or Film

Font Size

+

-

Reset

Back to list of all examples

Useful Stuff About:

Fixed Position Divs

This page demonstrates the various options for FIXED divs on a webpage. RESIZE the browser window and see how the FIXED divs remain in their corners or in the middle of the edges of the page.

The positioning of this divs are created with CSS only.

Key items to make this work:

  1. The html for these fixed divs must be OUTSIDE of a centeringDiv either
    • Just below <body> - not recommended because these divs get in the way of designing the centeringDiv content
    • Just above </body> - recommended so that they are out of the way when designing because DW design view will not render properly, on in DW Live View or viewing page in a real browser
  2. The important CSS rules to be applied (some only rendered properly while in DW Live View or viewing page in a real browser)

    • for top left corner placement
           <div id="topLeft">
                 Content
           </div>
      CSS Rules
      position:fixed;
      top:0;
      left:0;

    • for top right corner placement
           <div id="topright">
                 Content
           </div>
      CSS Rules
      position:fixed;
      top:0;
      right:0;

    • for top middle placement
           <div id="topMiddle">
                 Content
           </div>
      width:npx; (n=number value)
      margin-left: -n/2px; (NEGATIVE!!)
      position:fixed;
      top:0;
      left:50%;

    • for side middle left placement
           <div id="sideMiddleLeft">
                 Content
           </div>
      height:npx; (n=number value)
      margin-top: -n/2px; (NEGATIVE!!)
      position:fixed;
      top:50%;
      left:0;

    • for middle right side placement
           <div id="sideMiddleRight">
                 Content
           </div>
      height:npx; (n=number value)
      margin-top: -n/2px; (NEGATIVE!!)
      position:fixed;
      top:50%;
      right:0;

    • for bottom left corner placement
           <div id="bottomLeft">
                 Content
           </div>
      CSS Rules
      position:fixed;
      bottom:0;
      left:0;

    • for bottom right corner placement
           <div id="bottomRight">
                 Content
           </div>
      CSS Rules
      position:fixed;
      bottom:0;
      right:0;

    • for bottom middle placement
           <div id="bottomMiddle">
                 Content
           </div>
      width:npx; (n=number value)
      margin-left: -n/2px; (NEGATIVE!!)
      position:fixed;
      bottom:0;
      left:50%;
position:fixed;
top:0;
left:0;
position:fixed;
top:0;
right:0;
width: npx;
margin-left: -n/2px;
position: fixed;
top:0;
left:50%;
height: npx;
margin-top: -n/2px;
position: fixed;
top:50%;
left:0;
height: npx;
margin-top: -n/2px;
position: fixed;
top:50%;
right:0;
position:fixed
bottom:0
left:0
position:fixed
bottom:0
right:0
width: npx;
margin-left: -n/2px;
position: fixed;
bottom:0;
left:50%;