There is nothing evil about AP ( or DIVs)… it’s just how people use them. Always avoiding AP could be just as bad as using only AP ( ok, maybe not JUST AS, but you can see that it can also lead to headaches)
The key here is that RP moves the displayed image, but NOT the space it takes up.
SO how do we THINK our way out of this? We ask questions.
Do we want the image to be part of the normal text flow? It would appear not.
Does it need to push other elements away? umm… possibly not.
does it need to be aligned to the BOTTOM of some other element? Yes ( well that rules out FLOATs)
Do can is the element a set size, if so can we make space for it elsewhere? EASY! Yes, its an image so of course it has SET dimensions.
So it seems this is PERFECT for AP.
As ralph said, RP and AP work in CONJUNCTION with each other RP gives AP a frame or reference. In other words, the coordinates you give an AP’ed element will be relative to the space of the last AP’ed or RP’ed ancetsre (element). This is actually incredibly useful once you get your head around that little concept ( plus the thinking detailed above).
<div id="header">
<h1>Bling my coffin</h1>
<img class="hearse" src="hearse.JPG">
<ul id="navigation2">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
note that you dont need the ‘navigation’ div.
#header gets RP, since we want the picture to be at the bottom of the header/navigation
#navigation2 is the last child of #header so it will , uless you add padding to #header, or a border and then margin to naviation, be FLUSH with the bottom of #header
.hearse has AP this means it takes up NO space and can be positioned relative to #header, since it’s .heare’s the last AP’ed ancestor. note that it doesnt matter where within #header .hearse is, you could put it within the H1 if it made semantic sense. No matter how it’s paces in that segment of code we can now make it DISPLAY flush at the bottom of #header by using bottom:0 ; We can also push it from the right edge by using: right: (amout)px … no need for margin ( unless you are doing funky mixed unit math)
To complete the illusion ( and to be safe) we make space for the picture.
so the final css is something like :
#header
{
background: #C8C8C8;
position:relative;
overflow:hidden;
}
#header h1
{
margin: 0px;
padding: 50px 0 ; /*VERTICAL padding is at least half the height of the image or so*/
float:none;/*MAKE SURE YOUR H1 IS NOT FLOATED FROM OTHER RULES!!*/
}
#navigation2 {
background-color: #333;
padding:0;
margin:0;
list-style:none;
float:left;
width:650px;
padding-right:250px; /* this makes space for the image*/
}
#navigation2 li
{
float:left;
}
#navigation2 li a
{
display: block;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}
#navigation2 li a:hover { background: #383; }
hope that helps