Relative positioning breaks layout

Buon Giorno from York UK :slight_smile:

On this page http://tutorial.davidclick.com/philpotts-clone.html ive achieved the layout I want but my lack of understanding of positioning I fear has made this layout vulnerable, let me explain…

I wanted to position the image element aligned to the far right flush against the grey back ground of the header container so i used relative positioning but when i did i got this problem: http://i216.photobucket.com/albums/cc53/zymurgy_bucket/relative-positioning-jinx.jpg I couldnt understand why the image appeared to be pushing down the nav bar.

I then turned to absolute positioning http://i216.photobucket.com/albums/cc53/zymurgy_bucket/forces-absolute-positioning.jpg and this worries me as i wanted the image to sit flush, aligned left right up against the grey background but be contained within the header.

Basically ive goy my self in a relative absolute positioning twist ultimately i want to ge this layout http://i216.photobucket.com/albums/cc53/zymurgy_bucket/forces-absolute-positioning.jpg but not use absolute positioning on the dumper truck image.


Any help welcome, my head hurts :frowning:

I’d say it’s fine to use pos: abs in a situation like this. The key, though, is to give the header div position: relative, so that you give the abs image a positioning context. Once the header has position: relative, the absolute position of the image can be precisely measured relative to the header, which is what you want.

Thanks Ralph :slight_smile: I was thinking down those lines just needed confirmation!

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

A genuine big thank you for all your help. The code works but my lack of CSS understanding means i dont quite get it yet! I’m taking a step back and making sure i understand relative & absolute positioning first :slight_smile:

It’s an important concept, but actually quite simple—meaning that even I can understand it.

If you give an element position: absolute and then set its position to top: 50px, left: 100px, the question is, 50px from where and 100px from where? What is this positioning in relation to? By default, it’s in relation to the browser window. But usually in web page design, that sucks. You want it positioned in relation to the other elements on the page. In your example, you want the image to stay positioned relative to the header div, rather than to the browser window.

To make this happen, just give the element you want your AP element to be positioned in relation to (in this case, the header div) position: relative, and Bob’s your uncle—top: 50px suddenly means 50px from the top of the header div, and left: 100px means 100px from the left side of the header element.

You can also position relative to the bottom and right instead of top and left if the element is to be positioned relative to a different corner of its container.