Library code snippets

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.

Comments

  1. 01 Jan 1999 at 00:00

    This thread is for discussions of CSS Positioning Within a Container.

Leave a comment

Sign in or Join us (it's free).

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 ...

Related podcasts

  • Despise the listener

    We have a great lineup this week: Paul talks about getting things done in web design and an alternative approach to your reading list. Marcus explains the exciting area of insurance for web designers and we have Andy Clarke on the show to give us an update on CSS 3.

We'd love to hear what you think! Submit ideas or give us feedback