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: ,

5 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  

Post a Comment

Subscribe to Post Comments [Atom]

<< Home