CODEWITHSUNDEEP
css
aptyp
aptyp

Reputation: 251

position: absolute, div under div

I've 3 divs, each of them has position: absolute.

First is header, and its working.

Header has constant height, and second div "content" also works.

Third div is "footer".

"Content" has changeable height and when "content" is higher than web-browser window the "footer" is ON "content". I want to "footer" under "content" irrespective of content height.

My header is 300px height, content has margin-top: 300px. I can't use the same for the footer, because content hasn't got constant height.

I don't want to set one div with position: absolute, and these 3 divs place inside this one.

div#header{
  width: 960px;
  height: 200px;
  left: 50%;
  margin-left: -480px;
  position: absolute;
 }

div#content{
 width: 960px;
 border: 1px solid black;
 left: 50%;
 margin-left: -480px;
 position: absolute;
 margin-top: 200px;
 }

div#footer{
  width: 960px;
  height: 30px;
  left: 50%;
  margin-left: -480px;
  position: absolute;
  bottom: 10px; /*with this i've div fixed to the bottom of web-browsers' window */
  clear: both;
  }

Upvotes: 5

Views: 30229

Answers (5)

yunzen
yunzen

Reputation: 33439

If you want something to be of constant width and centered try this

#footer,
#header,
#footer {
    width: 960px;
    margin: 0 auto;
}

and forget about 

left: 50%;
margin-left: -480px;
position: absolute;

Upvotes: 0

scessor
scessor

Reputation: 16115

In the future browser can calculate. For your example this could be nice to calculate the min-height for the content to set the foorter to the bottom if content height is low and to set the footer after the content if it has a heigh value. E.g.:

HTML:

<div id="header" class="content">header</div>
<div id="content" class="content">content</div>
<div id="footer" class="content">footer</div>

CSS:

html, body {
    height: 100%;
}
.content {
    position: relative;
    width: 960px;
}
#header {
    height: 200px;
}
#content {
    border: 1px solid black;
    min-height: -moz-calc(100% - 302px);
    min-height: -webkit-calc(100% - 302px);
    min-height: calc(100% - 302px);
}
#footer {
    height: 100px;
}

Unfortunately only firefox and IE9 and higher support calc at the moment, so this is more theoretically. If you want to test it, see this jsfiddle.
If you want to do this with all current browser you need to use javascript.

Upvotes: 0

Ashwin Krishnamurthy
Ashwin Krishnamurthy

Reputation: 3758

If you are willing to use position : relative which is a tad better than position : absolute in cases like this, http://jsfiddle.net/vFTXg/1/ - Try editing the value of your content's height here and your footer will be automatically adjusted.

CSS

.header {
    position : relative;
    width : 100%;
    height : 90px;
    background-color : #000;
}
.content{
    position:relative;
    width : 100%;
    min-height : 200px;
    background-color : #f00;
}
.footer{
    position:relative;
    width : 100%;
    height : 50px;
    background-color : #0f0;
}

HTML

<div class='header'></div>
<div class='content'></div>
<div class='footer'></div>

Upvotes: 1

Scott
Scott

Reputation: 21882

You're over positioning.

You do not need to position everything absolutely unless there's something you aren't sharing.

JSBin Example

Upvotes: 3

Jach0
Jach0

Reputation: 115

I would recommend using CSS floats

Do something like this:

<div id="wrapper">
    <div id="header">...</div>
    <div id="content">...</div>
    <div id="footer">...</div>
    <div class="clear"></div>
</div>

Set the site-width on the wrapper and let the other divs have the same width.

Use float:left on header, content and footer

Set clear:both on the clear-div.

Now you can set the height on the elements you want to have a fixed hight - and you don't have to bother with absolute positioning.. If you insist on using positioning, you could just position the wrapper.

Upvotes: 0

Related Questions