Positioning of css elements not where I am expecting them to be



Hi there, I have played around with this for ~6 hours now and I'm getting grumpy because I can't see why it's not working. :)

If I made the adminHeader small it fits at the top and seems to work properly. But when I make it bigger the content goes all screwy...

The structure is like this..

adminMaster (the main template where everything goes) adminHeader (my top portion of the website, inside master) adminContent (middle, inside master, under header) adminFooter (bottom, inside master, under content)

My adminContent is in the middle of my header and the footer is right under the content.

I have all 4 "structures" set to relative. Of course I won't be leaving Administration THAT big when it's done but I need to know WHY the other elements are not going nicely under the header.

They are block elements, nothing is absolute, so they should technically all flow nicely. On the "common" areas of the website (not posted in this example) I have widths set to pixels (988px), but for the admin portion of the website I would like master to fill the browser window (width:100%) and the other structures (header, content, footer) to fill up the master.

What I need help with... (please)

Why does the layout not flow one after the other?

If its easy (I havnt looked it up yet) - a minimal width (800px) on the Master DIV would be nice.

Comments? Am I doing this in a bad way?

In case someone missed it - the jsfiddle is at the top :)

Problem courtesy of: PerryCS


The height of adminHeader is set to 24px. The text is overflowing from the container, which is why you can see it, but the dimensions of the adminHeader are still set to 24px in height. If you increase the height of adminHeader, the following divs will move down the page.

See fiddle

Is this what you are trying to do?

Solution courtesy of: Carey Estes


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.