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.
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: 960 CSS, horizontal div align
8 Comments:
but what if the page scrolls?
if the page scrolls make position relative
.parent {
position:relative;
.
.
.
}
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.
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*/
}
margin: 0 auto;
the above css code will make your div on center of the page
source.... Div on center of a page
ling
steroid satın al
heets
SESV
diyarbakır
düzce
edirne
elazığ
erzincan
ZF27G
kuşadası
malatya
adana
kayseri
bursa
8SW
Post a Comment
Subscribe to Post Comments [Atom]
<< Home