Ignora il margine nel caso in cui div sia vuoto

Ho 2 DIV allineati orizzontalmente uno accanto all’altro e centrati usando un wrapper. Io uso margin-right per separare DIV2 da DIV1. DIV2 potrebbe non avere contenuto. Nel caso in cui DIV2 non abbia contenuto, voglio che il margine sia ignorato e che DIV1 sia centrato da solo.

Questo è il mio CSS:

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

Questo è HTML:

 
Div1

Ho creato un violino con cui giocare con: http://jsfiddle.net/wfrcG/3/

C’è un modo in CSS per raggiungere questo objective senza javascript?

Puoi usare la :empty pseudo class :empty per impostare il margine su 0 se l’elemento è vuoto.

ESEMPIO QUI

 #div2:empty { margin:0; }