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.
Related articles
Related discussion
-
Header and Footer in Web page print
by janebush08 (5 replies)
-
Inserting checkbox values into one field
by ramsenthil2000 (1 replies)
-
Create this kind of website
by Yutthaphong (0 replies)
-
Problem with my Site after upgrade to PHP Version 4.4.9
by cperkins (0 replies)
-
How to do we process these things like web hosting?web development?
by ephraimgasel (0 replies)
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.
Events coming up
-
Nov
23
Dan Cederholm Workshop
London, United Kingdom
Handcrafted Bulletproof CSSwith Dan Cederholm of "Simplebits"Learn how craftsmanship can apply to the intangibility of web design. Dan Cederholm will guide you though a case study, pointing out the details that matter most when designing fle...
This thread is for discussions of CSS Positioning Within a Container.