Ignore margin in case div is empty

I have 2 DIVs aligned horizontally next to each other and centred using a wrapper. I use margin-right to separate DIV2 from DIV1. DIV2 could have no content. In case DIV2 has no content, i want the margin to be ignored and DIV1 to be centred alone.

This is my CSS:

#div1 {
  display: inline-block;
  width: 100px;
  border: 1px solid #000000;
  margin-left: 200px;
#div2 {
  display: inline-block;

This is HTML: p

<div style="text-align:center;">
  <div id="div1">Div1</div>
  <div id="div2"></div>

I created a fiddle for you to play with: http://jsfiddle.net/wfrcG/3/

Is there a way in CSS to achieve this without javascript?


You could use the :empty pseudo class to set the margin to 0 if the element is empty.


#div2:empty { margin:0; }