CSS Positioning Within a Container

One of the best things about CSS is that you can position an object absolutely anywhere you want in the document. It's also possible (and often desirable) to position objects within a container. It's simple to do too. Simply assign the following CSS rule to the container:

#container 
{
position: relative
}

Now any element within this container will be positioned relative to it. Say you had this HTML structure:

<div id="container"><div id="navigation">...</div></div> 

To position the navigation exactly 30px from the left and 5px from the top of the container box, you could use these CSS commands:

#navigation 
{
position: absolute;
left: 30px;
top: 5px
}

Perfect! In this particular example, you could of course also use margin: 5px 0 0 30px, but there are some cases where it's preferable to use positioning.

You might also like...

Comments

Trenton Moss This article was written by Trenton Moss. Trenton's crazy about web accessibility and usability - so crazy that he went and started his own web accessibility and usability consultancy to help make ...

Contribute

Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

“UNIX is basically a simple operating system, but you have to be a genius to understand the simplicity.” - Dennis Ritchie