Div aside with absolute and sticky footer position

Question

Div aside with absolute and sticky footer position

I am having problems with the following html layout.

I know there are other questions about absolute positioning and a sticky footer, I tried a lot of solutions, but I didn’t, so I tried to post all the layout HTML code to see if anyone could find a solution.

I used this StickyFooter solution.

The problem is the correct panel.

It remains fixed 25 pixels from the footer, but as you can see, if the content of the panel grows, the content falls below the footer and outside the bottom border of the panel.

Obviously, the contents would remain inside the bar, causing the bar to grow and clicking on the footer.

<!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 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>

+6

css css-position sticky-footer

opaera Jan 19 '12 at 10:35

source share

8 answers

1nfiniti · Answer 1 · 2012-01-25T20:20:55+0000

Leave your HTML as it 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 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; }

PS is a bad question.

I'm going to give you the benefit of doubt and say that you are working with an unreasonable client or with some immutable HTML markup, and you need to do some hacking to get this presentable.

Otherwise, there is no excuse for this approach.

Lorenzo marcon · Answer 2 · 2012-01-19T11:00:01+0000

I remove position:absolute; and add the definition of float:right; in #sectionBar . Then add <br clear="all" /> just before closing the div using the class “wrapper”.

Then you have to move the elements. Work with margins and shims to get the desired result.

The problem you are describing is caused by the behavior of position:absolute . In fact, with absolute positioning, the element is removed from the natural html stream and, as the name implies, is absolutely positioned :) Thus, other elements (for example, the footer) go "under".

Mouna · Answer 3 · 2012-01-19T22:04:41+0000

I made some changes to the code you posted, I hope this 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 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>`

DH-Designs · Answer 4 · 2012-01-23T20:18:48+0000

I could confuse what you are looking for, but why not add overflow: auto under id = sectionBar? This way, if the content, if it is larger than your field, adds a scroll bar and does not flow through the footer. Again, perhaps I am missing the question or end result you are looking for.

Jeremy carlson · Answer 5 · 2012-01-25T04:05:24+0000

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

One of your problems was also that your footer should have the same overall height as the negative edge of the wrapper; it looks like you did not consider padding and / or boundaries in the equation.

The given code includes a side section in the code, so if it has not been placed (for example, for an adaptive layout), it will appear later. But you can have it anyway, 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>

Yaroslav Rakhmatullin · Answer 6 · 2012-02-09T01:51:42+0000

You cannot make the panel absolute with the top and bottom “margins” and expect it to grow above the size you are talking about.

Below is a slightly different approach that looks very (exactly?) Like yours. I have not tested in other browsers than firefox 8, so I can not guarantee that it is 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 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>

ddilsaver · Answer 7 · 2012-03-07T13:13:18+0000

Instead, you can use position:relative; , because absolute will make your elements lag behind it, if you do not use z-index: then the elements will be included on top of it. Take a look at this sticky footer if you really need to build it that way.

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

Edit:

I'm not sure what you are trying to achieve in reality. Since the current way of building HTML is not really meaningful for what you are doing. Since the sectionBar is a sidebar, it should not be higher than your main content, it should be structured after your section content. You should also use floats instead of position. This way you do not need to deal with z-index and content. The page will also expand correctly using float , but you will have to use mainly .clearfix hack for IE.

There is also almost never a case where you have to build something in a certain way. The only case when you use CMS or existing old code. Therefore, if you do not get the effect that you need, you need to look at your Semantic structure of your code.

In one of your comments, I saw that this is based on the layout of Photoshop, which makes me think that you are building it from scratch, and means that you are in full control of the HTML. Therefore, if this is so, then to say that it should be constructed in this way is unacceptable.

Josh farneman · Answer 8 · 2012-04-20T14:00:15+0000

Decidable. You can do this by floating the #sectionBar , as mentioned in @ lorenzo.marcon.

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

See this script for a solution.

Div aside with absolute and sticky footer position

More articles: