Floating a footer DIV bottom center of screen inside a container Div??

Hi Im having terriblr trouble..........typical- i get the website done nice and fast and the last thing the annoying client wants I struggle!! I have a container div for the whole site keeping it centered. The client now wants the 'copyright' footer at the bottom of the screen......foalting of course......so its always centered and at the bottom of the screen whatever the size of your monitor.
Im struggling like  hell...........I maybe not doing it right but when i get somwhere close it seems to be conflicting with the scrolling background pictures.
please have a look and advise if you know help.....thanks!!    www.websitesmonthly.com/townhouse

I think you're making this overly complex.  All you need is a simple 2-column layout.
http://alt-web.com/TEMPLATES/CSS-Basic-2-column-layout.shtml
Add whatever you wish to the #mainContent (left) div.
Nancy O.

Similar Messages

  • Selection screen inside a custom container

    hey guys,
    I have a requirement to display a selection-screen inside  a container,How can we solve this problem?
    Hey guys Help me out.
    Regards,
    Midhun Abraham
    Edited by: Midhun Abraham on Oct 7, 2008 7:08 AM

    you can call a selection screen in sub screen area
    declare selection screen as
    begin of selection-screen 0100 as subscreen.
    end of selection-screen...
    then,
    in flow logic of your module pool screen
    PBO
    call subscreen <sub_area> including sy-repid '0100'.
    " at selection-screen output event is called
    PAI.
    call subscreen <sub_area>.
    "at selection-screen is called

  • Footer at bottom of screen or at bottom of page

    Hi guys
    I'm creating a new website which I would like to give a footer that stays on the bottom of the screen if the content only needs the screen height, but that follows the content if the content makes it a scrollable page?
    So if there are for example only 3 lines of text between my header and my footer on the webpage, I would like to have the footer at the bottom of the screen instead of just below the text. If there is a lot of content which makes the page scrollable, I would like to have the footer at the bottom of the page, below the content.
    Do you understand what I mean?
    Thanks!
    Bob

    I'll show you how but I don't recommend doing this becuase it relies on hacks that don't work well in all devices.  Nobody really cares if your footer is aligned at the bottom of the screen on short pages. 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Alt-Web Template :: 100% Height Layout</title>
    <style type="text/css">
    * 100% height layout with header, sidebar and footer
    html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
    background:gray;
    font-family:arial,helvetica,sans-serif;
    font-size:small;
    color:#666;
    #container {
    z-index:1;
    position:relative; /* needed for footer positioning*/
    margin:50px auto; /* center, not in IE5 */
    width:750px;
    height:auto !important; /* real browsers */
    height:100%; /* IE6: treated as min-height*/
    min-height:100%; /* real browsers */
    overflow:hidden;/*float containment*/
    background:#FFF; /*for equal height columns, use a 2-toned background image here*/
    #header {
    padding:1em;
    background-color:#FFFFCC;
    border-bottom:6px double gray;
    #sidebar {
    float:left;
    width:8.79em;
    background-color:#FFCC00;
    padding: 1em;
    margin-top: 5.5%;
    #content {
    padding:1em 1em 5em; /* bottom padding for footer */
    margin-left: 11em;
    border-left: 6px double gray;
    background-color: #EAEAEA;
    #footer {
    position:fixed;
    width:725px;
    bottom:0; /* stick to bottom */
    background:#ddd;
    border-top:6px double gray;
    min-height: 40px;
    padding:1em;
    </style>
    </head>
    <body>
    <div id="container">
    <div id="header">
    <p>#header</p>
    <h1>100% Page Height </h1>
    </div>
    <div id="sidebar">
    <p>#sidebar</p>
    <p>Footer remains fixed at viewport bottom, even on short pages.</p>
    </div>
    <div id="content">
    <p>#content</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et pretium arcu. Donec eget nisi ut dolor convallis vestibulum non sagittis libero. Donec tempor pretium nibh nec dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In libero dolor, facilisis eu tristique suscipit, consectetur vel tortor. Phasellus tristique; metus ac rutrum sodales, purus diam tincidunt dui, vitae fringilla nunc magna in nisi. Fusce felis erat, elementum eu sollicitudin quis, rutrum a ante. Integer ullamcorper rutrum dolor vitae vehicula. </p>
    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam quis justo quam. Nullam aliquam luctus suscipit. </p>
    <p>Ut id nibh nec nisi ullamcorper vehicula. Phasellus lacus lectus, euismod sed tincidunt ac, laoreet venenatis libero! In hac habitasse platea dictumst.</p>
    <p>Donec eget nisi ut dolor convallis vestibulum non sagittis libero. Donec tempor pretium nibh nec dapibus.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et   pretium arcu. Donec eget nisi ut dolor convallis vestibulum non sagittis   libero. Donec tempor pretium nibh nec dapibus. Vestibulum ante ipsum   primis in faucibus orci luctus et ultrices posuere cubilia Curae; In   libero dolor, facilisis eu tristique suscipit, consectetur vel tortor.   Phasellus tristique; metus ac rutrum sodales, purus diam tincidunt dui,   vitae fringilla nunc magna in nisi. Fusce felis erat, elementum eu   sollicitudin quis, rutrum a ante. Integer ullamcorper rutrum dolor vitae   vehicula. </p>
    </div>
    <div id="footer">
    #footer
    </div>
    <!--end container --></div>
    </body>
    </html>
    Nancy O.

  • Is it normal that, when I try to share something on my iphone 5, be it via e-mail or textmessage, my keyboard is no longer touching the bottom of my screen, it 'floats' in the middle of my screen, making it impossible to choose the addressee?

    Dear fellow Apple owners,
    Is it normal that, when I try to share something on my iphone 5, be it via e-mail or textmessage, my keyboard is no longer touching the bottom of my screen, it 'floats' in the middle of my screen, making it impossible to choose the addressee?
    http://imgur.com/dwXwdGu.jpg
    Has anybody seen this before?
    I had it in 6.1.2, 6.1.3 and 6.1.4
    All of them have the same problem...
    Does anybody have a solution?

    Hey StevenKusters,
    Welcome to Apple Support Communities! First I would try backing up and erasing all content and settings, but if that doesn't resolve the issue you can use iTunes to restore your iOS device - part of standard isolation troubleshooting. Restoring your device will delete all data and content, including songs, videos, contacts, photos, and calendar information, and will restore all settings to their factory condition.
    iTunes: Restoring iOS software
    http://support.apple.com/kb/HT1414
    All the best,
    David

  • TS3623 When I download certain movies I get a black rectangle in the bottom center of the screen. How do I get rid of this?

    When I download movies, I get a small, black rectangle in the bottom center of the screen. This is irritating! How do I get rid of it?

    Search the forum.  This has been reported a few times. I do not recall what the fix is, but it has already been posted.

  • Can the Dock in Yosemite be made transparent? I would also like Safari to paint to the bottom of the screen with the dock icons floating over the window.

    Can the Dock in Yosemite be made transparent? I would also like Safari to paint to the bottom of the screen with the dock icons floating over the window.

    Do you have that problem when running in the Firefox SafeMode? <br />
    [http://support.mozilla.com/en-US/kb/Safe+Mode] <br />
    ''Don't select anything right now, just use "Continue in SafeMode."''
    If not, see this: <br />
    [http://support.mozilla.com/en-US/kb/troubleshooting+extensions+and+themes]

  • Bottom center part of screen boundary gets warm

    Hi,
    The bottom center part of the screen boundary of Lenovo 3000 N100 gets warm, both front (screen) and backside (cover). I noticed that backside of that area has a crack.
    What is the solution, do I need to change the screen or cover or just need to close the crack with tape.
    Solved!
    Go to Solution.

    The heat is from the lcd inverter.
    This is a component that converts dc voltage to ac voltage
    to power the lamp in the display.
    Some heat is normal.
    If it gets Very warm, it may be failing.
    If it fails, the screen will most likely go dark.
    Fairly easy and low cost replacement, in most areas.
    Due to the age of the laptop, I would just wait and see.

  • HT5858 When I swipe up from the bottom of the screen to use control center I am not able to use the music controls for music or podcasts and music controls do not work on the lock screen either is anybody else having this problem???????

    When I swipe up from the bottom of the screen to use control center I am not able to use the music controls for music or podcasts and music controls do not work on the lock screen either is anybody else having this problem???????

    Not really sur easy you would be having that problem.  Mine works.  You might try RESET DEVICE
    Hold down the Sleep/Wake button and the home button together until the apple logo appears (ignore the ON/OFF slider) then let both buttons go and wait for device to restart (no data will be lost). Then try again and see if it makes a difference

  • Problems with CSS Footer Div

    Problems with CSS
    I am building a new page for my company. I am trying to place the Div Footer at the bottom of the screen. I have placed (i believe) the appropriate information for the CSS.
    The problem is when i minimize the browser the Footer section never leaves the screen and hovers over the other div tags. When I shrink the browser to its maximum the divs fall on top of each other.
    What I would like to know is how to make the Footer div below hide like the other divs but remain at the bottom of the page instead of hovering over the other divs. I have read that I should not apply fixed divs.... is that correct?
    I have applied to the current CSS to the below web page: http://trbla.com/sample.html
    #rhythm {
    width: 607px;
    margin-top: 300px;
    margin-right: auto;
    margin-left: auto;
    *img {
    border: 0;
    #rhythm #goldr {
    width: 215px;
    float: left;
    border: 0;
    #rhythm #trbnew {
    float: left;
    width: 181px;
    border: 0;
    #rhythm #greyr {
    width: 211px;
    float: left;
    border: 0;
    #nav {
    margin-top: 200px;
    width: 607px;
    margin-right: auto;
    margin-left: auto;
    padding-bottom: 100px;
    clear: both;
    #nav #navonewrap {
    float: left;
    clear: both;
    #nav #navwraptwo {
    float: left;
    width: 175px;
    height: 22px;
    #nav #navwrapthree {
    float: right;
    width: 215px;
    margin-right: -75px;
    #footer {
    bottom: 0px;
    clear: both;
    position: fixed;
    width: 100%;
    #footer #left_footer {
    float: left;
    clear: left;
    overflow: hidden;
    #footer #r_footer {
    float: right;
    Thanks for anyones help thus far,
    Rhythm

    I think it's the way I'm doing the conditional statement.
    'Went through another knowledge-base article that basically had me
    incorporate the conditional attribute into the <xsl:for-each
    select= . . .> statement and it appears to be a better way. I
    also created a xslt fragment and inserted it into a php page rather
    than making the whole thing xslt. I think this helps as well, but
    can't absolutely close the book on this until the server is
    properly configured to transform xslt in php pages.
    Here's the latest
    http://cals.arizona.edu/arizonawet/workshops/current_workshops-trial2.php

  • Page doesn't flush to the bottom of the screen, despite the lack of content on the page

    On the home page of my website, the content doesn't fill the whole screen, therefore the footer isn't flushed to the bottom of the screen. Is there a way for the footer to automatically flush to the bottom for any resolution? Here is a link to my page so you can  see the example:
    www.ees-energy.com
    or a better example at
    www.ees-energy.com/downloads.html
    Thank you,
    Obaid

    Hello
    This is where it gets tricky for me!
    I have never used a sticky footer - I just don't like the idea and it has always seemed a bit over complicated to me.
    I did have a go at applying it to your page and got it to work without too much difficulty but, adding an effect like this to an established page is tricky because it's hard to see how different components interact with each other.
    The basic advice from the sticky footer site is to use this as fundamental structure to the page:
    <div id="wrap">
        <div id="main" class="clearfix">
        </div>
    </div>
    <div id="footer">
    </div>
    If you want to go this way then I would suggest starting from the beginning with that HTML and adding your content to it.   Notice that the footer is outside the wrapper and your content would need to go in the #main div.  They have page giving instructions on the site and a wedge of CSS that you can just cut and paste into your style sheet.
    You have chosen to use a liquid layout (which is a part of the problem with width that you have asked about in your other post).  I agree that a liquid layout is a neat idea but again, I don't like it so much because it's over complicated..  For instance, your page doesn't look so good in a wide monitor.
    One other way to get your footer further down the page would be to add some content to your sidebar.  How about a mission statement or a green quote of some kind or a pull quote from your text?
    Sorry I can't be of any further help with the sticky footer thing.
    Martin

  • CS6.5 photoshop file doesn't center on screen. How can I do this?

    I have used various options under windows, tried reducing the size of the file and saving it in .jpeg instead of other formats. The image either floats off the bottom of the screen completely or leaves a peak at the top portion. I need it to center so I can work on it. Any ideas?Photoshop General Discussion

    Which operating system are you using?

  • Footer div not aligning in Dreamweaver when swf file added...

    Hi, here's a good one!
    I have a template that has a div (#footer) as an uneditable area.  When I add an swf file to a div above it (#flash), the #footer div displaces in Dreamweaver, but looks OK in any browsers that I preview it in.
    Here's a link.... It's the DESIGN page that's the issue and I'm guessing that any other pages based on this template may generate the same problem.
    http://www.davidcoshdesign.com/nea
    Any ideas?
    Thanks in anticipation!

    Add clear: both; to the ccs selector below (as shown)
    #footer {
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 9px;
        color: #FFF;
        height: 45px;
        width: 950px;
        left: 50px;
        padding-top: 5px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
        text-decoration: none;
        top: -50px;
        position: relative;
        float: left;
        margin: 0px;
       clear: both;

  • Need help with footer div positioning

    hi guys,
    thank you for checking out my post...
    on my website i want a footer div to sit at the very bottom
    of the page. if the content requires the page to be scrolled i
    would like the footer to be pushed down still at the bottom.
    so basically, whether the page needs to be scrolled or not,
    the footer div will be at the absolute bottom of the page. hope
    that makes sense!
    ive been trying and trying with endless tutorials and trying
    different things that i know but to no avail.
    if you could have a look at my site
    here i would
    be most grateful for any advice or solutions.
    thank you once again and i hope to hear from you.
    all the best,
    sm

    Spindrift wrote:
    >
    quote:
    either make that bottom:0px; or bottom:0;
    >
    > oops! sorry, my bad! ive made the correction
    > now the footer kind of works but just stays in the same
    place as the content
    > scrolls behind it.
    > when no scrolling is needed on a page what we have is
    good though.
    > im after getting the content to push the footer down to
    the bottom of the page
    > so when you scroll down to the bottom (if the page needs
    to be scrolled) the
    > footer will be at the bottom (of the page not screen) if
    that makes sense.
    > many thanks,
    > sm
    >
    You could check out this demo - view the code - paying
    attention to the
    comments in the embedded css, particularly, the padding on
    the #body
    (note that this is a div and not the body tag) div and the
    height of the
    #footer div.......
    http://matthewjamestaylor.com/blog/bottom-footer-demo.htm
    Personally I'd just let it go with the flow :-)
    chin chin
    Sinclair

  • F/U Ques. to previous post (css/bleeding off the bottom of the screen)

    i got the top of the container div bleeding off the way i'd like and, while the bottom bleeds as well, something weird is happening with the footer div. looks fine in ff on a mac but, in safari, it's too high up - not sticking to the 10px off the bottom that it's supposed to.
    here's a link:
    http://clients.quintandquint.com/dtw/
    many thanks.

    Honestly, I'd not worry about that difference.  However, try changing this -
    <td>  <div class="footer">
             <table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td align="center"><a href="#">ABOUT DAVID</a> &#8226; <a href="#">THE WORKSHOPS</a> &#8226; <a href="#">CONTACT</a> &#8226; <a href="http://www.facebook.com/davidturnleyphotography" target="_blank">CONNECT ON FACEBOOK</a> &#8226; ALL IMAGES COPYRIGHTED BY THEIR RESPECTIVE OWNERS.
              </td>
          </tr>
        </table></div>
    to this -
    <td><div class="footer"><table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td align="center"><a href="#">ABOUT DAVID</a> &#8226; <a href="#">THE WORKSHOPS</a> &#8226; <a href="#">CONTACT</a> &#8226; <a href="http://www.facebook.com/davidturnleyphotography" target="_blank">CONNECT ON FACEBOOK</a> &#8226; ALL IMAGES COPYRIGHTED BY THEIR RESPECTIVE OWNERS.</td>
          </tr>
        </table></div>
    In other words, remove that whitespace from the code, and see what happens.

  • How do you reactivate the grey utilities scroll up tab at the bottom of the screen that should reveal wifi, bluetooth etc? Doesn't matter what orientation the ipad is in, it won't scroll up from the bottom. All other screen functions work normally.

    How do you reactivate the grey utilities scroll up tab at the bottom of the screen that should reveal wifi, bluetooth etc?
    Doesn't matter what orientation the ipad is in, it won't scroll up from the bottom.
    All other screen functions work normally.

    Settings/Control Center. There are two options which are pretty self-explanitory...one enables/disables access on the Lock Screen and one enables/disables access within apps/games.

Maybe you are looking for