By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

CSS Div Positioning

Learn how to control the position of div elements in CSS.

Edited: 2013-01-03 12:00

In this Tutorial we will be focusing on how to control the position of your division elements in CSS. Absolute and relative positioning is highly underestimated by web-designers; many layouts that are hard to do with floats, can be much easier to create with relative and absolute positioning.

There is just one rule you need to remember when working with absolute positioning – the containing block need to have its position set to relative – doing this will allow you to position elements relatively to the containing elements boundaries, rather than having your absolutely positioned divs become one big uncontrollable mess!

You should also keep in mind that this should work on any qualifying elements, not just the div element!

The Basement div

The first thing we need to do, is to make a containing element. In this tutorial we will be focusing on the div element, so lets create an element with an id of Basement – this is demonstrated in the below example:

<div id="Basement">
</div>

We will refer to this unique ID in our CSS and scripts, but in this tutorial, lets just concentrate on the CSS. The next thing we need to do, is to position this div relatively, and give it a somewhat fixed width.

#Basement {
 width: 75%;
 min-width: 768px;
 max-width: 1200px;
 position: relative;
}

These numbers are just thrown in for the purpose of this example, you may want to chose some numbers that are more suitable for your design. Any element that we want to position absolutely, will do so relatively to its parenting element, the Basement div.

Your first child div

The below element will be positioned at the top right of Basement.

<div id="RightContent">
</div>

And its CSS:

#RightContent {
  position: absolute;
  top:0;right:0;
  width: 15%;
  height: 200px;
  background: #ff0000;
}

We applied a background and a place-holder width to show the effect. And now, the entire thing put together!

<!DOCTYPE html>
<html>

  <head>
    <title>My first Website</title>
    <style type="text/css">
      #Basement {
        width: 75%;
        min-width: 768px;
        max-width: 1200px;
        position: relative;
      }
      #RightContent {
        position: absolute;
        top:0;right:0;
        width: 15%;
        height: 200px;
        background: #ff0000;
      }
    </style>
  </head>

  <body>
    <div id="Basement">
      <div id="RightContent">
      </div>
    </div>
  </body>

</html>

View Example!

We will leave it to you to place more divs, such as a LeftContent and CenterContent – moving on from here should be pretty easy, knowing this simple positioning trick!

See also

  1. How to center elements