Absolute positioning for wrapper?

Hello. This is my first post so hopefully I’m not breaking some critical protocol and hopefully my question is not too terribly dumb to ask.

I was wondering if there may be any particular drawbacks I might have overlooked to making my wrapper absolute positioned. You see, I’ve been seeing a few of these sites that have a HTML5 Video header that fills 100% of the browser and is responsive. I looked at the source for a few but they had enough going on that I couldn’t quite grasp how they’d done it so I decided to take a stab at it just by trial and error. The only way I could get it to work so that the main content of the page was always below, out of sight, was to position as follows:

.content {

  position: absolute;
  top: 100%;

I was pretty happy with the result but I couldn’t find anyone else making their main wrapper absolute so I wondered if there is a reason why. Most of the content inside the wrapper will be positioned statically, with maybe some floats here and there. Before I start building a site on the concept, I just want to make sure it has a solid foundation. Any reason I shouldn’t roll with that? Does anyone know of a better, more elegant practice for the same effect?

Here’s the basic concept as I coded it in case it still doesn’t make sense:

Cheers :slight_smile:

Welcome to SitePoint, jaeming.

I couldn’t reach your link :confused: but maybe this will help:

The thing is, No mater what, you are going to have a fixed/relative position parent element… even if it is the BODY or HTML tag. all AP positioned elements are positioned relative to the last AP/RP ancestor.

NOW here is the BAD THING

When you position something absolutely , you take it out of the normal document flow. That means that element doesn’t affect or push any OTHER SIBLING element around when the page is rendered.

Since what you have done is make the MAIN wrapper ( I assume it encompasses the entire document, kinda like a BODY tag) then you wont see MUCH difference…BUT if you were to have used another sibling tag to that wrapper would see major wonkiness.

Hey Dresden, thanks for your reply. Sorry about the link. hosting on dropbox has worked for me in the past but maybe not this time. Here’s a mirror I just uploaded: http://shufflebox.org/video_header/

Yes, I was worried absolute positioning might bite me somehow later, maybe with floats or something…but what you’re saying is that as long as I treat my main wrapper like a body tag, I should get away with it in theory. That’s good to know. I’ll put my footer in there as well then. The nav will probably be outside of it but fixed at the top.

Thanks for your reply and welcome. I haven’t played with making web pages since about 2001 I think, when I was a young punk, making all Flash sites for all my friend’s bands. It’s really fun discovering CSS now and I’m enjoying working out the details of making layouts.


I have a co-worker who declares all divs as relative at the top of the page.
then can adjust along the way.