atlantis72 Posted May 14, 2014 Share Posted May 14, 2014 I want a div at the bottom of another div, and I want it centered, just using css not javascript. HTML <div id="parent"> <div id="bottom_element">test</div> </div> CSS #parent {height:100% width:100%} #bottom_element {position:absolute; bottom:5px; width:200px; margin:0 auto} So the issue is that position absolute and margin auto do not seem to work together. What is an alternative without javasript? Link to comment https://forums.phpfreaks.com/topic/288470-placing-an-element-at-the-bottom-of-a-page-centered/ Share on other sites More sharing options...
Jacques1 Posted May 14, 2014 Share Posted May 14, 2014 The parent element must have a non-static position as well. And you're missing a semicolon between the width and the height declaration. Link to comment https://forums.phpfreaks.com/topic/288470-placing-an-element-at-the-bottom-of-a-page-centered/#findComment-1479402 Share on other sites More sharing options...
atlantis72 Posted May 14, 2014 Author Share Posted May 14, 2014 Sorry I just wrote it quickly as an example. So if I make parent position relative, then it will work? Link to comment https://forums.phpfreaks.com/topic/288470-placing-an-element-at-the-bottom-of-a-page-centered/#findComment-1479403 Share on other sites More sharing options...
Azercii Posted May 25, 2014 Share Posted May 25, 2014 Might be bad practice (not sure?), but on a layout I'm working on I use; position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; Which would center the bottom_element, then it may require padding/margin to position it correctly. Here is a Fiddle Link to comment https://forums.phpfreaks.com/topic/288470-placing-an-element-at-the-bottom-of-a-page-centered/#findComment-1480795 Share on other sites More sharing options...
adam_bray Posted May 26, 2014 Share Posted May 26, 2014 The easiest way to do it is with flexbox, but it may require some browser prefixing to work universally. Link to comment https://forums.phpfreaks.com/topic/288470-placing-an-element-at-the-bottom-of-a-page-centered/#findComment-1480862 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.