div aside with position absolute and sticky footer

Asked 19/1, 2012 at 10:35 Answered 20/4, 2012 at 14:0

I'm in trouble with the following html layout.

I know that there are other questions about absolute positioning and sticky footer, I tried a lot of solutions but I didn't make this work, so I tried to post the whole layout html code to see if someone can find a solution.

I used this StickyFooter solution.

The problem is the right bar.

It shoud stay fixed at 25px from the footer, but, as you see, if the bar content grows, the content goes down over the footer and outside the bar bottom border.

Obviously I would the content stay inside the bar, causing the bar to grown and pushing the footer down.

<!doctype html>
<head>
    <style type="text/css">        
        /* Sticky Footer */
        { margin: 0; }
        html, body, form { height: 100%; }

        .wrapper {
            min-height: 100%;
            height: auto !important;
            height: 100%;
            margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
        }

        #footerPage, #divPush 
        {
            height: 50px; /* .push must be the same height as .footer */
        }
        /* End / Sticky Footer */


        body { background-color:#000; width:960px; margin:0 auto; position:relative; font-family:Tahoma, Verdana; }

        div.wrapper { background-color:#fff; position:relative; }

        #headerPage {  }
            #divHeaderImg { height:100px; }            
            #navPage { height:30px; line-height: 30px; font-size:16px; background-color:#90bfe7; padding:0 10px; position:relative; overflow:hidden; vertical-align: middle; }
            #divSubMenu { background-color: #90BFE7; line-height: 28px; padding: 10px; vertical-align: middle; }

        #sectionBar {
            z-index:1000;
            position:absolute; right:10px; top:13px; width:200px; bottom:75px; /* footer height + 25px */
            border:solid 2px #90bfe7; background-color:#ffffff; 
            padding:15px 10px;
        }        

        #footerPage { position:relative; padding:10px; background-color:#90bfe7; color:#000; }

        #sectionPage { padding:12px 10px 10px 10px; width:700px; }
    </style>
</head>
<body>
<div class="wrapper">
    <div id="sectionBar">
        <div id="divBarContent">
            <div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
                Nulla vitae ante magna, sed pharetra nunc. Donec tincidunt dignissim mi ac tempus. Fusce ut ante tellus, et egestas libero. Donec facilisis, tellus at sagittis iaculis, arcu orci posuere elit, a luctus odio nunc ac sem. Etiam at erat et neque tristique eleifend. Curabitur blandit turpis sit amet tortor tempor eu euismod ligula sollicitudin. Suspendisse non sapien eu nibh faucibus feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
                Integer quam turpis, porttitor nec congue convallis, fringilla sit amet purus. Donec at elit mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ligula tellus, rhoncus eget faucibus vitae, bibendum vel arcu. Pellentesque ante lectus, sodales at interdum sit amet, sollicitudin cursus quam. Fusce eget orci vel eros scelerisque dictum. Cras facilisis, metus vitae venenatis aliquet, nibh sem blandit mi, sit amet viverra massa ipsum ut quam. Vivamus vitae nunc eget justo pellentesque mollis vel non justo. Mauris tempus mattis rutrum. Donec nec viverra nulla. Cras commodo felis sit amet nulla fringilla mollis. 
            </div>
        </div>
    </div>
    <div id="headerPage">
        <div id="navPage">menu</div>
        <div id="divHeaderImg"></div>
        <div id="divSubMenu">sub menu</div>
    </div>
    <div id="sectionPage">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
        Nulla vitae ante magna, sed pharetra nunc. Donec tincidunt dignissim mi ac tempus. Fusce ut ante tellus, et egestas libero. Donec facilisis, tellus at sagittis iaculis, arcu orci posuere elit, a luctus odio nunc ac sem. Etiam at erat et neque tristique eleifend. Curabitur blandit turpis sit amet tortor tempor eu euismod ligula sollicitudin. Suspendisse non sapien eu nibh faucibus feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
    </div>
    <div id="divPush"></div>
</div>
<div id="footerPage">footer</div>
</body>
</html>

Nobe answered 19/1, 2012 at 10:35 Comment(1)

Still thinking this is unsolvable. Is there some CSS guru who wants to try ? – Nobe 20/1, 2012 at 8:52

Leave your HTML as-is, change your CSS to this:

   /* Sticky Footer */
    { margin: 0; }
    html, body, form { height: 100%; }

    .wrapper {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
        clear:both;
    }

    #footerPage, #divPush 
    {
        height: 50px; /* .push must be the same height as .footer */
    }
    /* End / Sticky Footer */


    body { background-color:#000; width:960px; margin:0 auto; position:relative; font-family:Tahoma, Verdana; }

    div.wrapper { background-color:#fff; position:relative; }

    #headerPage { width:960px;position:absolute;top:0;left:0; }
        #divHeaderImg { height:100px; }            
        #navPage { height:30px; line-height: 30px; font-size:16px; background-color:#90bfe7; padding:0 10px; position:relative; overflow:hidden; vertical-align: middle;width:940px; }
        #divSubMenu { background-color: #90BFE7; line-height: 28px; padding: 10px; vertical-align: middle; }

    #sectionBar {
        z-index:1000;
        position:relative; float:right;right:10px; top:13px; width:200px; bottom:75px; /* footer height + 25px */
        border:solid 2px #90bfe7; background-color:#ffffff; 
        padding:15px 10px;
    }     
    #divPush {clear:both;}

    #footerPage { position:relative; padding:10px; background-color:#90bfe7; color:#000; }

    #sectionPage { padding:12px 10px 10px 10px; width:700px;padding-top:190px; }

P.S. this is a bad question.

I am going to give you the benefit of the doubt and say you're working for an unreasonable client or with some uneditable HTML markup and you need to do some sort of hack to get this presentable.

Otherwise, there's no excuse for taking this approach.

Haze answered 25/1, 2012 at 20:20 Comment(3)

here's a fiddle with the "working" code... CSS Guru not required... It's just a cheap hack job. A CSS Guru would tell you not to build your markup this way. jsfiddle.net/TPk29/5 – Haze 25/1, 2012 at 20:23

PS There's no way to get the right bar to grow vertically with the content. You can simulate this though by applying a background image to the content that lines up with the background of the right bar... If that helps you – Haze 25/1, 2012 at 20:29

This is not working, when the page content grows and it's bigger than then bar content, the bar doesn't grow vertically. I was thinking that this is really unsolvable, by the way it's just a layout designed in photoshop first, and I liked it too. So I just wonder if someone could make it work. Maybe it's unsolvable, in this case, I'll change it (already changed). By the way I think it is a nice question for css passionates. – Nobe 26/1, 2012 at 8:18

I'd remove position:absolute; and add a float:right; in #sectionBar definition. Then add a <br clear="all" /> immediately before closing the div with class "wrapper".

Then you will have to reposition your elements. Work on margins and paddings to get the desired result.

The problem you describe is caused by position:absolute behaviour. In fact, with absolute positioning, the element is removed from the natural flow of the html, and as the name suggests, absolutely positioned :) Thus, the other elements (e.g. footer) go "under" it.

Creepie answered 19/1, 2012 at 11:0 Comment(1)

Sorry but this doesn't work. The bar content goes down behind the footer, and also, if the bar content is small, the bar do not stay fixed at 25px from the footer but just fit its content. Replacing the absolute positioning with right floating is one of the tried solutions, with no success. Thanks anyway for the answer. – Nobe 19/1, 2012 at 11:11

I made some changes on the code you posted, I hope that helps !`

<style type="text/css">        
    /* Sticky Footer */
    { margin: 0; }
    html, body, form { height: 100%; }

    .wrapper {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */

    }

    #footerPage 
    {
        height: 50px; /* .push must be the same height as .footer */

    }

    #divPush {height: 800px; }

    /* End / Sticky Footer */


    body { background-color:#000; width:960px; margin:0 auto; position:relative; font-family:Tahoma, Verdana; }

    div.wrapper { background-color:#fff; position:relative; }

    #headerPage {  }
        #divHeaderImg { height:100px; }            
        #navPage { height:30px; line-height: 30px; font-size:16px; background-color:#90bfe7; padding:0 10px; position:relative; overflow:hidden; vertical-align: middle; }
        #divSubMenu { background-color: #90BFE7; line-height: 28px; padding: 10px; vertical-align: middle; }

    #sectionBar {
        z-index:1000;
         right:10px; top:13px; width:200px;  /* footer height + 25px */
        border:solid 2px #90bfe7; background-color:#ffffff; 
        padding:15px 10px;
        display:inline;
        float:right;
        height: 100%;
    }        

    #footerPage { position:relative; padding:10px; background-color:#90bfe7; color:#000; }

    #sectionPage { padding:12px 10px 10px 10px; width:700px; }
</style>`

Elaterite answered 19/1, 2012 at 22:4 Comment(1)

Sorry, but it's similat to the previous answer, the ber doesn't grow when the page content is bigger than the bar content. Thanks anyway. – Nobe 20/1, 2012 at 8:40

I might be confused on what you are looking for, but why not add overflow:auto under the id=sectionBar? That way if the content if greater than your box it will add a scroll bar and not flow over the footer. Again, maybe I am missing the question or the end result you are looking for.

Belle answered 23/1, 2012 at 20:18 Comment(2)

I didn't specify this, but I don't want scrollbars... it was obvious I think. – Nobe 24/1, 2012 at 0:11

I see what you are saying now. – Belle 24/1, 2012 at 0:48

@lorenzo.macon is right - you need to avoid using position: absolute, and use a float instead.

One of your issues was also that your footer needs to have the same total height as the negative margin of the wrapper; it looks like perhaps you weren't accounting for padding and/or borders in the equation.

The supplied code includes the sidebar second in the code, so that if it were not floated (e.g., for a responsive layout), it would come later. But you can actually have it either way, and it should work.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <style type="text/css">        

/* LAYOUT */
    /* Original Sticky Footer: http://ryanfait.com/sticky-footer/ */

* { margin: 0 }

html, body, .wrapper {
    height: 100%;
    }

body {
    margin: 0 auto; 
    position: relative; 
    }

.wrapper {
    position: relative; 
    min-height: 100%;
    height: auto !important;
    margin: 0 auto -70px; /* bottom margin = -1 x ( #footerPage height + padding + border ) */
    }

#footerPage, #divPush {
    height: 50px; /* .push must be the same height as .footer */
    padding: 10px; /* must have same padding! */
    }
#divPush {
    clear: both;
    }
    /* End / Sticky Footer */


#sectionPage {
    width: 70%;
    float: left;
    }

/* 
    #sectionBar has percentage for L+R padding, so can calculate w/ #sectionPage
    and ems for T+B padding so can relate to typography. This is less important.
*/
#sectionBar {
    width: 20%;
    padding: 2em 5%;
    margin-left: -1px; /* IE7 needed this */
    float: right;
    display: inline; /* Fix for IE5/6 doubled float margin issues - see http://www.positioniseverything.net/explorer/doubled-margin.html */
    }        

/* VISUAL STYLE separated for clarity */

body {
    background: #000; 
    max-width: 960px; /* use max-width for flexible layouts */
    font-family: Tahoma, Verdana;
    }

div.wrapper { background: #fff }

#divHeaderImg { height: 100px; }            
#navPage { background: #90bfe7; padding: .5em; }
#divSubMenu {
    background: #90bfe7;
    padding: .5em;
    }

#sectionBar {
    background: #fcf; 
    }        

#footerPage {
    position: relative;
    background: #90bfe7;
    }

#content {
    background: #ffc;
    padding: 12px 10px 10px 10px;
    }
    </style>
</head>
<body>
<div class="wrapper">

  <div id="sectionPage">
    <div id="headerPage">
      <div id="navPage">menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu </div>
      <div id="divHeaderImg"></div>
      <div id="divSubMenu">sub menu</div>
    </div><!-- #headerPage -->
    <div id="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
    </div>
  </div><!-- #sectionPage -->

  <div id="sectionBar">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
  </div>

  <div id="divPush"></div>

</div><!-- .wrapper -->

<div id="footerPage">footer</div>
</body>
</html>

Overarm answered 25/1, 2012 at 4:5 Comment(1)

I know that this is a solution, but I don't need it since it's different from my layout. What I posted is what I have to build, this is a different layout, and one more thing about your code, if the page content grows, the bar do not grows.. you should use the Css Holy Grail solution to do this in your code. – Nobe 25/1, 2012 at 8:23

You can't make the bar absolute with top and bottom "margins" and expect it to grow beyond the size you're telling it to be.

Below is a slightly different approach which looks very much (exactly?) like yours. I didn't test in other browsers than firefox 8 so I can't guarantee that it's bulletproof, but this should at least give you an alternative idea:

<!doctype html>
<head>
<style type="text/css">        
/* Sticky Footer */
{ margin: 0; }
html, body, form { height: 100%; }

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
}

#footerPage, #divPush 
{
    height: 50px; /* .push must be the same height as .footer */
}
/* End / Sticky Footer */


body { background-color:#000;
 width:960px;
 margin:0 auto;
 position:relative;
 font-family:Tahoma, Verdana;
 }

div.wrapper { 
    background-color:#fff; position:relative; 
    border:2px solid pink;
}

#headerPage {  
    border:2px solid green;
}
#divHeaderImg { height:100px; }            
#navPage { 
    height:30px;
 line-height: 30px;
 font-size:16px;
 background-color:#90bfe7;
 padding:0 10px;
 /*
 position:relative;
 overflow:hidden;
 */
 vertical-align: middle;
    border:2px solid lime;

 }
#leftBox {
    border:2px solid yellow;
    float;left;
}
#divSubMenu { 
    border:2px solid darkgreen;
    background-color: #90BFE7;
 line-height: 28px;
 padding: 10px;
 vertical-align: middle;
 }

#divBarContent {
    border:1px solid firebrick;
}
#divBarContent div {
    border:1px solid cyan;

}        
#sectionBar {
    z-index:1000;
    /*
     position:absolute; right:10px; top:13px; width:200px; bottom:75px; 
    */
    border:solid 2px #90bfe7; background-color:#ffffff; 
    padding:15px 10px;
    float:right;
    margin:0px 10px 25px 0px;
    width:200px;
    /*
    */
}        
/*
*/
/* footer height + 25px */

#footerPage { position:relative; padding:10px; background-color:#90bfe7; color:#000; }

#sectionPage { padding:12px 10px 10px 10px; width:700px; }
</style>
</head>
<body>
<div class="wrapper">
    <div id="sectionBar">
        <div id="divBarContent">
            <div>

# Update from 2.0-BETA3 to 2.0-BETA4

## XML Driver <change-tracking-policy /> element demoted to attribute

We changed how the XML Driver allows to define the change-tracking-policy. The working case is now:


# Update from 2.0-BETA2 to 2.0-BETA3

## Serialization of Uninitialized Proxies

As of Beta3 you can now serialize uninitialized proxies, an exception will only be thrown when
trying to access methods on the unserialized proxy as long as it has not been re-attached to the
EntityManager using `EntityManager#merge()`. See this example:


The Collection interface in the Common package has been updated with some missing methods
that were present only on the default implementation, ArrayCollection. Custom collection
implementations need to be updated to adhere to the updated interface.


            </div>
        </div>
    </div>

    <div id="leftBox">
        <div id="headerPage">
            <div id="navPage">menu</div>
            <div id="divHeaderImg"></div>
            <div id="divSubMenu">sub menu</div>
        </div>
        <div id="sectionPage">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
            Nulla vitae ante magna, sed pharetra nunc. Donec tincidunt dignissim mi ac tempus. Fusce ut ante tellus, et egestas libero. Donec facilisis, tellus at sagittis iaculis, arcu orci posuere elit, a luctus odio nunc ac sem. Etiam at erat et neque tristique eleifend. Curabitur blandit turpis sit amet tortor tempor eu euismod ligula sollicitudin. Suspendisse non sapien eu nibh faucibus feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
            <br> <br> <br> <br> <br> <br> moo
        </div>
        <div id="divPush"></div>
    </div>
    <div style="clear:both;">
</div>
<div id="footerPage">footer</div>

</body>
</html>

Juliojulis answered 9/2, 2012 at 1:51 Comment(2)

This is the same of other solutions posted, when the body content grows the bar do not extend vertically. I suspected this was unsolvable.. by the way thanks for the answer. – Nobe 9/2, 2012 at 8:22

np. what you want is possible, but not how you did it. – Gillian 9/2, 2012 at 11:9

You can probably use position:relative; instead because absolute will make your elements go behind it unless you use z-index: then the elements will go on top of it. Look at this sticky footer if you really have to build it this way

http://www.cssstickyfooter.com/using-sticky-footer-code.html

Edit:

I'm not sure what you are trying to accomplish really. Because the current way the HTML built isn't really semantic for what you're doing. Since sectionBar is a side bar it shouldn't be above your main content it should be structured after after your sectionPage content. You should also be using floats instead of position. That way you don't have to deal with z-index and content going behind. The page would also expand correctly using float but you would have to make use of a .clearfix hack for IE mainly.

There's also almost never a case where you have to build something a certain way. The only time that's a case is if your using a CMS or per-existing old code. So if your not getting an effect you want then you need to look at your Semantic structure of your code.

I saw in one of your comments that this is based on a photoshop layout which leads me to believe you are building this from scratch and means you have complete control over the HTML. So if that's the case then saying it has to be built this way is unacceptable.

Pain answered 7/3, 2012 at 13:13 Comment(1)

I tried position:relative but with this I can't get what I want. – Nobe 7/3, 2012 at 17:25

It is solvable. You can do it by floating #sectionBar as @lorenzo.marcon mentioned.

You'd need to move #sectionBar to right before#sectionPage` and wrap both elements. I've also added a clearfix to the wrapper.

See this fiddle for the solution.

Atabrine answered 20/4, 2012 at 14:0 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags