Contact Us

|

FriendFeed FriendFeed

|

follow us on twitter Twitter

|

 Rss Feed

|

Favorites Add to Favorites

Monday, August 3, 2009

Center align a div horizontally and bottom of the page

There is an easy way to have the div position to the left or right to the screen with the use of fixed property. But how do you make a div horizontally center aligned and always be at the bottom of the page?

This will be of great useful if you want to make any popup div for display important messages or take any surveys etc. So here is a simple trick to show the content of a div horizontally aligned and always be at the bottom of the page...

HTML:
<div class="parent">
<div class="child">
Content here
</div>
</div>

CSS:
.parent{
position:fixed;
bottom:0px;
width:100%; //width should be 100%
}
.child{
width:300px; //min width should give to center the div.
margin:0px auto; //here it will make center
}

Position fixed will support modern browser including ie7, but for ie6 you have to use microsoft expressions to render the page as position fixed, as it will render wrongly. If you find any solutions without using expression in ie6, please explain use which will be helpful to others.

Labels: ,

7 Comments:

Anonymous Anonymous said...

but what if the page scrolls?

January 5, 2012 at 2:57:00 PM PST  
Blogger Hisham Samir said...

if the page scrolls make position relative

.parent {
position:relative;
.
.
.
}

August 25, 2012 at 12:11:00 PM PDT  
Anonymous Anonymous said...

Simply does not work for me. Tried using this exact code and some other different methods. It will either stay on the left as if it's not positioned at all, or using the code you provided, it completely disappears.

October 30, 2012 at 5:26:00 AM PDT  
Anonymous Anonymous said...

That's because the author obviously thinks that the comment for CSS is a //. Thats only the single line comment for javascript, for CSS it has to be a /* */.

Corrected CSS is :

.parent{
position:fixed;
bottom:0px;
width:100%; /*width should be 100%*/
}
.child{
width:300px; /*min width should give to center the div.*/
margin:0px auto; /*here it will make center*/
}

November 30, 2012 at 12:33:00 PM PST  
Blogger lingmaaki said...

margin: 0 auto;

the above css code will make your div on center of the page

source.... Div on center of a page

ling

April 1, 2014 at 12:43:00 AM PDT  
Blogger Albert Andrada said...

Really Nice Information,Thank You Very Much For Sharing.
Wordpress Development Company

May 6, 2015 at 6:47:00 AM PDT  
Blogger Kanye Co Jamila said...

Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from HTML5 CSS3 Javascript Online Training from India . or learn thru HTML5 CSS3 Javascript Online Training from India. Nowadays JavaScript has tons of job opportunities on various vertical industry. HTML5 CSS3 Javascript Online Training from India

March 30, 2018 at 9:51:00 PM PDT  

Post a Comment

Subscribe to Post Comments [Atom]

<< Home