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
  • 36805 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

    Here's the code I mentioned. It uses vh units, so old browsers dislike it, but if you don't care about them (I don't) and you don't plan to go past 600 pixels in height for your content (right now it's set to 400 min-height for both middle ids) this should work...

    <!doctype html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>Test with VH units</title>

    <style>

    body {

        margin:0;

    }

    #topone {

        width:100%;

        height:9vh;

        min-height:50px;

        background-color:gray;

    }

    #middleone {

        width:900px;

        margin:0 auto;

        height:81vh;

        min-height:400px;

    }

    #middle_content {

        min-height:400px;

        background-color:red;

        overflow:hidden;

    }

    #bottomone {

        margin-top:10px;

        margin-top:1vh;

        height:9vh;

        min-height:50px;

        width:100%;

        background-color: gray;

    }

    #topinfo, #bottominfo {

        width: 900px;

        margin: 0 auto;

    }

    </style>

    <!--[if lt IE 9]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

    <![endif]-->

    </head>

    <body>

    <div id="topone">

      <div id="topinfo">you can add another div here with the same width as the middleone and margin:0 auto to center it at the same rate as #middleone</div>

    </div>

    <div id="middleone">

        <div id="middle_content">

          Your main content here

        </div>

    </div>

    <div id="bottomone">

      <div id="bottominfo">you can add another div here with the same width as the middleone and margin:0 auto to center it at the same rate as #middleone</div>

    </div>

    </body>

    </html>


    @Jon, I've seen Viewport Units successfully used for Typography. But never quite this way before.

    @hinc94, Browser support for Viewport Units is still  dicey:

    http://caniuse.com/viewport-units

    My Android Jelly Bean 4.1 hates it 

    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