Jump to content

placing an element at the bottom of a page centered


atlantis72

Recommended Posts

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?

  • 2 weeks later...

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.