Center Div inside another 100 width div

Question

Quite a  simple  problem here and not sure why it s being so complicated    Have a 100   width  sized div  Have another div positioned in the middle of this div  sized 940px width    Any ideas

User · Accepted Answer

parent   text-align  center     parent  gt   child   margin  0 auto  width  900px

User · Answer

The below style to the inner div will center it   margin  0 auto

User · Answer

The key is the margin  0 auto  on the inner div   A proof-of-concept example    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  xml lang  en  lang  en  gt   lt body gt       lt div style  background-color  blue  width  100    gt           lt div style  background-color  yellow  width  940px  margin  0 auto   gt              Test          lt  div gt       lt  div gt   lt  body gt   lt  html gt

User · Answer

Just add margin  0 auto  to the inside div

User · Answer

outerdiv       margin-left  auto      margin-right  auto      display  table      Doesn t work in internet explorer 7    but who cares

User · Answer

for detail info  let s say the code below will make a div aligned center   margin-left  auto  margin-right  auto    or simply use   margin  0 auto    but bear in mind  the above CSS code only works when you specify a fixed width  not 100   on your html element  so the complete solution for your issue would be    your-inner-div         margin  0 auto        width  900px

[css] Center Div inside another (100% width) div

Examples related to css

Examples related to xhtml