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
    H
    hinc94Author
    Known Participant
    April 2, 2014

    Nancy O. wrote:

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

    Nancy O.

    That's why I use a 100% width container and then center the content within that using either text-align:center (example above), or a separate <div> with margin:0 auto and a set width within the fixed one.


    Actually I got 2 divs. Div 1 is the main content already in the right position, which is center of the page. Div2 is a navagation bar with text and background color. I want to position div2 to the center bottom and keep 10px margin-top to div1. Even I resize my browser window, I want div2 to remain 10px margin-top with div1, not overlay it, and the width of div2 expand itself depends on the window size. And I want the text in div2 remain in bottom of the page but not shift to left or right when I resize the browser windows. It would be greatful if anyone can help, thank you!

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices