Skip to main content
H
hinc94
Known Participant
April 2, 2014
Question

How to align a div to the bottom center?

  • April 2, 2014
  • 2 replies
  • 36736 views

Anyone can help?
Should I use relative or absolute for position?

This topic has been closed for replies.

2 replies

A
Anonymous
August 14, 2014

Div align on bottom center

#outer{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

}

#inner{

width: 50%;

height: 50%;

top:50%;

margin: 0 auto;

position: relative;

background:orange;

}

Full source :...http://www.corelangs.com/css/box/divindiv.html

Helsy

Jon Fritz
Community Expert
Jon FritzCommunity Expert
Community Expert
April 2, 2014

What is the ultimate goal here?

If you want to have an element hold to the bottom of the screen no matter what and sit on top of any other content, you would use position:fixed...

#bottom_nav {

     width:100%;

     position:fixed;

     bottom:0px;

     text-align:center;

     z-index:9999;

}

Then in your html...

<div id="bottom_nav">Home | About | Contact | Portfolio</div>

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    April 2, 2014

    But position:fixed won't center.  Neither will position:absolute.

    Nancy O.

    Nancy O'Shea— Product User & Community Expert
    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    April 2, 2014

    https://drive.google.com/file/d/0B0kD2070M7JPOEtCb0NhYnFkQlE/edit?usp=sharing

    Here you go, the red one is the div1.


    For best cross browser rending, simply build your site logically from top to bottom & everything will fall into place.  BTW, no positioning is required for any of this.

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML5 Document, 1-Col</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <style>
    * {
        padding: 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    img {
        max-width: 100%;
        vertical-align: baseline
    }
    body {
        padding: 0;
        width: 90%; /**adjust width in px or % as required**/
        margin: 0 auto; /**this is centered**/
        background: #F5DD83;
        color: #2294AE;
        font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
        font-size: 100%;
        box-shadow: 2px 2px 4px #333;
    }
    header {
        margin: 0;
        padding: 0 1%;
        width: 100%;
        background: #B00202;
        color: #FFF;
    }
    header h1, header h2 {
        display: inline;
        color: #F5DD83;
        padding: 0 3%;
    }
    article {
        padding: 2%;
        background: #FFF;
    }
    nav { background: #69C; }
    footer {
        background: #B00202;
        color: #FFF;
        text-align: center;
        margin: 0;
    }
    </style>
    </head>
    <body>
    <!--begin header-->
    <header> 
    <h1>Sitename</h1>  <h2>Some pithy slogan...</h2>
    </header>
    <!--begin main content-->
    <article> 
    <h3>Heading 3</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>
    <h3>Heading 3</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>
    </article>
    <!--begin footer-->
    <footer> 
    <!--begin navigation-->
    <nav>Horizontal menu goes here...</nav>
    <small>© 2014 Your Site Name. All rights reserved</small> </footer>
    </body>
    </html>

    This is what it looks like in browsers:

    Nancy O.

    Nancy O'Shea— Product User & Community Expert
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices