CSS help to fix overflow div

Question

I have three sections (divs) basically in a web page.

1. Header
2. Content
3. Footer

All the three divs have absolute position. The problem is when the content div has more text and increases in height, it overlaps on the footer div (poses more problem in small screen devices). I want the footer div move down according to the height of the content div.

How to do this without removing absolute position of header and content divs? Current styles of divs are below:

.header{
position:absolute;
top: 0px;
left: 40px;}

.content{float:left;
margin:40px;
position:absolute;
top:200px;
max-width:600px;
z-index:9999;
-webkit-font-smoothing:antialiased;}

.footer{height:auto;
left:40px;
position:absolute;
width:20%;
z-index:1000}

Please help. Thank you.

Answer 1

I suggest that you change the position to static.

Elements that have absolute positioning are not affected by other elements, and they don't affect other elements. So in your case, you will have to remove the position: absolute if you want the footer to move according to the position of the content.

Answer 2

I am not completely sure what you are trying to do, but you will most-likely need to remove position: absolute; from the content section. I setup a quick JSFiddle to demonstrate the technique I would use:

http://jsfiddle.net/TrnLm/

HTML:

<header></header>
<article>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pharetra iaculis quam, in porttitor risus imperdiet id. Proin molestie libero eu mi hendrerit semper ac ac sem. Sed risus mauris, scelerisque nec nisi ut, auctor elementum neque. Donec eget risus ultricies sem lobortis viverra non eget justo. Aenean laoreet tellus non sapien tincidunt, nec egestas diam aliquet. Maecenas a tincidunt arcu. Phasellus egestas quam tortor, semper dignissim massa commodo sed. Aliquam erat volutpat. Fusce sed diam suscipit, ornare lacus ac, vulputate lacus. Curabitur imperdiet felis vitae ipsum rutrum sagittis.</p>
    <p>Pellentesque non bibendum nisi. Donec pulvinar diam mattis, cursus ipsum tempus, commodo sapien. Sed id suscipit massa. Proin eu tincidunt urna. Ut ultricies hendrerit mollis. Mauris sollicitudin tincidunt augue vitae tincidunt. Maecenas aliquam fermentum varius. Aenean nec velit venenatis, gravida massa nec, semper velit. Etiam sagittis magna at lorem fermentum pulvinar.</p>
    <p>Nunc tristique posuere velit. Quisque sodales diam nunc. Nam rhoncus magna a purus laoreet, sagittis volutpat felis volutpat. Fusce sagittis aliquet diam, vitae semper velit hendrerit ut. Nullam odio lacus, ultrices ut dui ut, consectetur eleifend quam. Mauris eget bibendum enim, sed fringilla nulla. Phasellus auctor metus quis pulvinar scelerisque. Curabitur at mi at lacus imperdiet eleifend vitae at turpis. Nam bibendum lacinia fermentum. Duis vel nisi risus. Vivamus felis neque, bibendum nec lobortis nec, congue in odio. Vestibulum dignissim vestibulum nisi, in scelerisque nibh feugiat vitae. Suspendisse eleifend rutrum feugiat. Suspendisse eu diam nec mauris aliquet posuere nec et quam.</p>
    <p>Ut placerat tellus at orci egestas, eget viverra lectus tempor. Pellentesque ultrices tellus ut massa dignissim sagittis. Ut vestibulum diam id odio luctus molestie. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse quis felis et tortor mattis tincidunt. Suspendisse potenti. Etiam dictum in sapien id consectetur. Vivamus nec erat facilisis arcu euismod consequat.</p>
    <p>Suspendisse potenti. Aliquam erat volutpat. Integer et sem vitae risus ornare elementum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec id nisi posuere lacus dignissim placerat. Cras id velit eros. Donec tincidunt nunc ac tempor eleifend. Aliquam ut imperdiet diam, eu imperdiet leo. Maecenas dapibus metus justo, non facilisis tellus ultricies in. Ut nec tempor neque. Nam sit amet quam ut risus blandit malesuada at ut metus. Integer nec massa vel nibh vestibulum molestie.</p>
</article>
<footer></footer>

CSS:

html {
    height: 100%;
}
body {
    margin: 0;
    min-height: 100%;
    position: relative;
    padding: 50px 0;
}
header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: red;
}
article {
    padding: 25px;
}
footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: red;
}

The key components to this are:

• The body has top and bottom padding to account for the size of the header and footer.
• The header and footer are absolutely positioned.
• The content is not absolutely positioned.

Hopefully this helps.