css - Center two divs in the middle of a wrapper -

i have css problem:

<div id="wrap">     <div id="left">i div 1</div>     <div id="right">i div 2</div> </div> 

i trying make "i div 1 div 2" center inside wrap div. not sure how explain it. design in percent, liquid design , i'm stuck.

any ideas?

if understand question correctly, should work:

#wrap {     background: #e7e7e7;     padding: 40px;     text-align: center;     width: 600px;   }  #left, #right {      background: #ccc;      display: inline-block;          padding: 20px;    } 

example at: http://jsfiddle.net/jackrugile/jzlw4/

this center 2 div blocks within wrap, side side.

---

edit: 2015 flexbox solution

flexbox more supported , better solution situation. there quirks come along above inline-block method, such horizontal spacing , vertical alignment issues. here flexbox solution:

#wrap {     background: #e7e7e7;     display: flex;     justify-content: center;     padding: 40px;      width: 600px;   }  #left, #right {     background: #ccc;     padding: 20px;    } 

example at: http://jsfiddle.net/jackrugile/4xf2c46d/

be sure check can use confirm flexbox supported in browsers supporting.