Absolutely positioning elements within a containing div

Confused about document flow

[Reflection]

Ok say you have a div which is used as the main container for all of your content. Now when you place other elements inside the main container by positioning them absolutely, they will use the main container's top/left as top:0 & left:0 . The absolutely positioned elements will also stay inside the margins of the main container. But if you give the main container a border, the border will just be a simple line as you would get if you gave an empty div a border.

Now I guess my question is why do the absolutely postioned elements 'respect' the main container's margins but do not, for lack of a better term, fill the main container?

[BlobFisk]

Hi Reflection,

This may have something to do with incorrect implementation of the box model? I believe it was IE5 that puts the padding and border within it's the containing box.

If so, Glish [glish.com] has a couple of solutions to this.

[Marcia]

I was just thinking about this very thing earlier, trying to make up a site template.

I'd like to have a heading graphic plus maybe a line of text at the very top of pages, followed by a navbar under it, with the rest of the page following.

Those top navbars generally have links like contact, search, home - common info but not really relevant. I'd rather it appeared there but was further down in the code. Wouild that take two divs, both absolutely positioned?

[BlobFisk]

Hi Marcia,

You can certainly do this two divs - one for the header stuff and one for the content.

The header div gets a top value of 0. Knowing the height of this header div, you can work out the top value of your content div, and place this first in your html. The positions will mean that the header displays top and content second, but in the html the content comes first.

HTH

[Birdman]

Hi Reflection and Marcia,

Reflection: I tend to keep my absolutely positions elements from being nested and always measure from the edge of the body(i.e. very top corner of page view).

Marcia: You should only need to position one element absolutely, the top. Just use margin-top for the main content div.

Example:
#top{
position: absolute;
top: 0;
left: 0;
height:?px;
width:?px;
}

#main{
margin-top:?px;
}

HTML:

<div id="main">main</div>
<div id="top">top</div>

[Reflection]

Reflection: I tend to keep my absolutely positions elements from being nested and always measure from the edge of the body(i.e. very top corner of page view).

I usually do this as well except I am playing around with a centered div using that nifty negative margin method that I found here along with a modified version of BlobFisk's excellent dhtml menus....

<deleted>...</deleted> while trying to explain what I was doing and a problem I was having, I think I found a solution, so I will spare you my ramblings :).

[BlobFisk]

That's very true, Birdman! Do you see an advantage to not using a second absolutely positioned div in this case? I was aware of the option of using a top margin setting, but always feel that if you are using pixel values in this way, that it can be safer using a second absolutely positioned div, rather than margins.

[Birdman]

Blobfisk, I'm not an expert on who supports what, but I think margin-top is very safe to use. The one problem is the text in the top div..if the browser is set to display the text larger than intended, it will cause problems. Of course, you could set the text size in pixels to solve that.

Disclaimer: I don't care what it does in NN4 ;)

[grahamstewart]

Reflection: when you absolutely position something it takes it out of the normal document flow. So if you absolutely position everything that is inside your container then your container won't have any 'real' contents - hence it IS an empty div and will have no height.

To fix this you might want to explicity specify a height for the container - or try only absolutely positioning some of the elements and leave the main text in the normal flow.

[Reflection]

Thanks graham.

[BlobFisk]

I don't care what it does in NN4 ;)

I agree with you there! As long as it degrades gracefully to NN4.x, I'm happy!

[grahamstewart]

The one problem is the text in the top div..if the browser is set to display the text larger than intended, it will cause problems. Of course, you could set the text size in pixels to solve that.

Or specify the height of the top div in em

Heres a layout that has navigation after the content in the html (in a nice SEO/accessibility friendly way) but which uses CSS to absolutely position the navigation above the content.

[webmasterworld.com...]