An End To Absolute Positioning

In this very simple tutorial we are going to make a WellRounded rect that does not use absolute positioning. We are going to use it to wrap the entire content of a page, much like this very page you are looking at.

What Is Absolute Positioning?

In modern CSS and XHTML you can imagine that your web page is like a word processing document (a la Microsoft Word). The web page consists of text and everything 'flows' from the left margin to the right margin and then wraps to the next line and on and on and on. But imagine that there is a glass pane above your text document, and onto that glass pane you can put anything you want, wherever you want. Whenever an item has position: absolute in its CSS it is placed on the glass pane above your document, rather than in the flowing river of words that normally make up the rest of your document.

Absolute positioning can be extremely useful, and certainly it is often easier to use than the normal flowing method. But items positioned absolutely typically have no reference to their brethren in the flowing stream - it is difficult to get them affect one another in terms of size and position.

Therefore, this tutorial shows how to make WellRounded rectangles that can work in the normal 'flow' of a document.

Step By Step

  1. Make a new empty document. Save it someplace.
  2. If you desire, set the document background color before proceeding.
  3. Define a new WellRounded rect. You can use any settings you want, but be sure to use Fit To Content for the Height. You can ignore the width. You can name the class and the div anything you desire, but to keep in synch with this tutorial, name the div mywrrect.
  4. You now have a 300 pixel wide round cornered rect in your document. Find the Div CSS for the rect. It should look like so:

    #mywrrect {
    position: absolute;
    left: 64px;
    top: 64px;
    width: 300px;/* -- edit width here! -- */
    padding: 0;
    margin: 0;
    }
  5. Comment out the position, left, top, width settings. We comment things in CSS by surrounding them with /* and */. Note: do not include the 'edit width here' in your comment. It should now look like so:

    #mywrrect {
    /*position: absolute;
    left: 64px;
    top: 64px;
    width: 300px;*/ /* -- edit width here! -- */
    padding: 0;
    margin: 0;
    }
  6. We are done! The WellRounded rect should now be at the top of your document, spanning its entire length.

Experiment

  • Try changing the margin of the rect in the CSS (for example: margin: 20px; ) See how it contracts towards the center?
  • Notice how you cannot change the rect width by simply dragging the edges anymore.
  • Try uncommenting just the width.
  • Uncomment the width and change the width to a percentage (for example width: 75%; )